Neste artigo você aprenderá a como utilizar o hx-trigger em um evento de change, para mudanças dinâmicas com HTMX
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
Considere um formulário incorporado dentro de uma tabela, onde cada linha representa uma parte de um formulário que precisa ser enviado quando um campo específico dentro dessa linha é alterado.
Um exemplo comum poderia ser uma tabela de corrida de revezamento, onde cada etapa é editável diretamente na tabela.
O desafio é fazer com que HTMX detecte mudanças em um elemento <select> e envie os dados do formulário imediatamente após a mudança ser feita.
Estrutura do Formulário
O formulário é estruturado dentro de uma tabela HTML, onde cada linha contém dados de uma etapa da corrida e um campo dropdown para selecionar o corredor para essa etapa:
<table>
<tr hx-post="/caminho/para/submissao" hx-swap="outerHTML" hx-trigger="change">
<th>Inicio</th>
<th>--></th>
<th>Fim</th>
<th>Distância</th>
<th>Dificuldade</th>
<td>
<select name="corredor" id="corredor">
<option value="">---------</option>
<option value="1">Corredor 1</option>
<option value="2">Corredor 2</option>
</select>
</td>
</tr>
</table>
Solução Proposta
Configuração HTMX para Mudança em <select>
O atributo hx-trigger deve ser configurado para reagir ao evento de mudança (change).
Este evento é disparado quando o valor do campo <select> é alterado e o usuário então desfoca o campo:
<tr hx-post="//exemplo.com/submissao" hx-trigger="change">
<td>
<select name="corredor">
<option value="a">Corredor A</option>
<option value="b">Corredor B</option>
</select>
</td>
</tr>
Neste exemplo, sempre que uma seleção é feita, HTMX envia automaticamente o formulário associado à URL especificada em hx-post.
Adaptação para Outros Tipos de Campos
Para campos de entrada como <input type="text">, HTMX também pode ser configurado para reagir a mudanças, mas é importante notar que o evento change só é disparado quando o campo perde o foco.
Para uma resposta mais imediata, como por exemplo, reagir a cada tecla pressionada, pode-se usar o evento input:
<input type="text" hx-post="//exemplo.com/atualizacao" hx-trigger="input">
Este código configurará HTMX para enviar os dados cada vez que o usuário digitar ou alterar o texto no campo de entrada.
Conclusão
Chegamos ao fim do artigo sobre como utilizar o hx-trigger em um evento de change!
HTMX oferece uma abordagem simples e eficaz para automatizar a submissão de formulários em resposta a mudanças em elementos HTML.
Configurando corretamente o atributo hx-trigger, é possível adaptar facilmente o comportamento de submissão automática para diferentes tipos de campos de formulário, garantindo uma interface de usuário responsiva e interativa.
Esta solução melhora significativamente a usabilidade e a eficiência das aplicações web, permitindo que os desenvolvedores criem experiências de usuário mais dinâmicas e envolventes.