Como chamar uma URL diferente para cada option no HTMX

Neste artigo você vai aprender a chamar uma URL diferente para cada option no HTMX, utilizando uma abordagem simples

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

A necessidade é clara: queremos que, ao selecionar uma opção de um dropdown em um formulário, uma URL correspondente a essa opção seja carregada dinamicamente no conteúdo de um elemento <div>.

O desafio surge quando tentamos implementar esta funcionalidade em HTMX, pois não há suporte direto para atribuir uma URL diferente para cada opção de um <select> sem utilizar parâmetros de consulta.

Solução Proposta

Configuração Inicial

A solução envolve a utilização de um listener JavaScript para interceptar mudanças no <select> e modificar o comportamento de requisição da HTMX baseado na opção selecionada:

<select id="make-selector" hx-target="#models" hx-trigger="change">
  <option value="audi">Audi</option>
  <option value="toyota">Toyota</option>
  <option value="bmw">BMW</option>
</select>

<div id="models">
  <!-- Resultados do hx-get vão aqui -->
</div>

JavaScript para Customização de Requisições

O código JavaScript a seguir é usado para interceptar o evento de configuração de requisição da HTMX e modificar a URL de acordo com a seleção:

document.addEventListener("htmx:configRequest", function (event) {
    if (event.target.id === 'make-selector') {
        let selectedOption = document.querySelector('#make-selector').value;
        let newPath = `/models/${selectedOption}`;
        event.detail.path = newPath;
    }
});

Este script ouve o evento htmx:configRequest, verifica se o evento foi disparado pelo <select> de interesse e, em seguida, substitui o caminho da requisição pela URL específica associada à opção selecionada.

Explicação Detalhada

• Evento HTMX: htmx:configRequest é um evento que permite interceptar e modificar detalhes de requisições antes que elas sejam processadas. Usamos esse evento para alterar dinamicamente o caminho da requisição com base na opção selecionada pelo usuário.
• Seleção Dinâmica de URL: Ao contrário de incluir a opção como um parâmetro de URL (por exemplo, /models?make=audi), essa abordagem configura diretamente o caminho completo da URL (por exemplo, /models/audi), o que pode ser ideal para rotas de API ou caminhos de servidor configurados para responder a URLs específicas.

Vantagens

• Localidade de Comportamento: Toda a lógica de modificação da requisição é mantida próxima ao elemento HTML relevante, facilitando a manutenção e compreensão do código.
• Flexibilidade: Este método é altamente flexível e pode ser adaptado para diferentes formatos de URL ou diferentes tipos de ações baseadas em seleção.
• Eficiência de Rede: Reduz o overhead de parâmetros desnecessários em URLs, o que é benéfico em ambientes de produção onde a eficiência da URL pode impactar o desempenho do servidor e do caching.

Conclusão

A implementação de seleções dinâmicas em formulários com HTMX utilizando URLs específicas para cada opção sem passar parâmetros é não apenas viável, mas também elegante com o uso adequado de JavaScript para customizar requisições.

Esta abordagem melhora a interatividade e a experiência do usuário, mantendo a clareza do código backend, fundamental para o desenvolvimento de aplicações web modernas e eficientes.