Neste artigo você aprenderá a Select2 com HTMX, um recurso frequentemente utilizado com o framework Django
Fala programador(a), beleza? Bora aprender mais sobre HTMX!
Antes de seguir com o artigo, não deixe de conferir nosso curso completo de HTMX!
São mais de 6 horas de aula, do básico ao avançado e com dois projetos completos! Além disso, você tem acesso vitalício, equipe de suporte especializada para te ajudar e certificado de conclusão.
O Problema
Quando um elemento <select> é enriquecido com Select2 e configurado para disparar uma solicitação HTMX em sua mudança, a expectativa é que qualquer seleção do usuário resulte em uma ação HTMX correspondente.
Contudo, essa integração direta falha, pois o Select2 manipula os eventos de mudança de uma maneira que não aciona automaticamente os ouvintes de eventos HTMX associados ao elemento original <select>.
Solução Proposta
Para resolver o problema, a solução envolve um pequeno script JavaScript que manualmente dispara o evento de mudança (change) no elemento <select> original, sempre que uma seleção é feita com Select2.
Isso assegura que o HTMX reconheça a mudança e execute a solicitação conforme esperado.
Implementação
A implementação recomendada utiliza o evento select2:select do Select2, que é disparado após a seleção de um item.
O script abaixo deve ser incluído em seu documento HTML ou arquivo JavaScript externo:
window.addEventListener("DOMContentLoaded", () => {
$('select').each(function () {
const selectElement = this;
$(this).on('select2:select', function () {
selectElement.dispatchEvent(new Event('change'));
});
});
});
Esse código escuta o carregamento do DOM e, em seguida, para cada elemento <select> na página, adiciona um ouvinte para o evento select2:select.
Quando o evento é acionado, ele manualmente dispara um evento de mudança no elemento <select> original, garantindo que o HTMX processe a mudança.
Solução Proposta com JavaScript Puro
A solução envolve ouvir diretamente os eventos disparados pelo Select2 e manualmente propagá-los para o elemento <select> original como eventos de mudança, que então podem ser capturados pelo HTMX.
Passo 1: Inicializar o Select2
Primeiramente, é necessário inicializar o Select2. Como estamos evitando jQuery, isso pode ser feito selecionando o elemento <select> com JavaScript puro e aplicando o Select2.
Este passo pode variar dependendo de como o Select2 é integrado ao seu projeto.
document.addEventListener('DOMContentLoaded', function() {
var selectElements = document.querySelectorAll('.select2');
selectElements.forEach(function(select) {
new Select2(select); // Substitua isso pela sua própria inicialização do Select2 sem jQuery, se necessário
});
});
Passo 2: Detectar Seleção e Disparar Evento de Mudança
Agora, precisamos adicionar um ouvinte para o evento select2:select e disparar um evento de mudança no elemento <select> original.
document.addEventListener('DOMContentLoaded', function() {
var selectElements = document.querySelectorAll('.select2');
selectElements.forEach(function(select) {
select.addEventListener('select2:select', function(event) {
// Criando e disparando o evento de mudança
var changeEvent = new Event('change');
select.dispatchEvent(changeEvent);
});
});
});
Note que o 'select2:select' é um evento específico do Select2 usado para detectar quando uma seleção é feita.
Quando esse evento ocorre, criamos e disparamos um novo evento de mudança no elemento <select> original, o qual pode ser capturado e tratado pelo HTMX.
Considerações Adicionais
Para garantir que esse script funcione com o HTMX, é importante que o HTMX já esteja carregado e operacional no momento em que o script é executado.
Isso significa que o script HTMX deve ser carregado antes desse código JavaScript personalizado.
Além disso, se seu elemento <select> for carregado ou modificado dinamicamente após o carregamento inicial da página, você pode precisar ajustar o script para aplicar o ouvinte de eventos a esses novos elementos de forma adequada.
Conclusão
A solução proposta oferece uma maneira eficaz de garantir que os eventos de mudança sejam reconhecidos pelo HTMX, mantendo a funcionalidade avançada do Select2 e a interatividade dinâmica do HTMX.
Esse método reforça a flexibilidade e a potência das aplicações web modernas, nos permitindo a criar interfaces ricas e responsivas com facilidade.