Como ativar um hx-get manualmente com JavaScript

Neste artigo você aprenderá como ativar um hx-get manualmente, utilizando JavaScript para fazer esta ação no 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

Imagine que você tenha um elemento na página, como um contador de itens no carrinho de compras, que precisa ser atualizado após um usuário realizar uma ação específica (por exemplo, adicionar um item ao carrinho).

Você quer que esse contador seja atualizado disparando um evento hx-get sem que o usuário precise fazer nada além da ação inicial.

A questão é: como você pode acionar esse evento hx-get programaticamente com JavaScript?

A Solução: Disparando hx-get com JavaScript

A solução envolve o uso da API JavaScript fornecida pelo HTMX para disparar eventos. Aqui está um passo a passo de como você pode implementar isso:

Passo 1: Definição do Elemento HTMX

Primeiro, certifique-se de que seu elemento HTML está corretamente configurado para usar HTMX:

<span id="contador-carrinho" hx-get="/caminho/para/contagem/carrinho" hx-trigger="customEvent" hx-target="#contador-carrinho" hx-swap="outerHTML">
</span>

Neste exemplo, hx-trigger="customEvent" é usado para indicar que este elemento deve ouvir um evento customizado que vamos disparar manualmente.

Passo 2: Disparando o Evento com JavaScript

Você pode disparar o evento hx-get manualmente criando e despachando um evento customizado no elemento desejado. Veja como você pode fazer isso:

// Função para disparar o evento 'hx-get'
function atualizarContadorCarrinho() {
    var evento = new CustomEvent('customEvent');
    document.getElementById('contador-carrinho').dispatchEvent(evento);
}

// Chamando a função baseada em alguma ação do usuário, por exemplo, após adicionar um item ao carrinho
document.getElementById('botao-adicionar-carrinho').addEventListener('click', function() {
    // Supondo que esta é a ação que adiciona um item ao carrinho
    adicionarItemAoCarrinho();

    // Depois de adicionar o item ao carrinho, disparamos o evento para atualizar o contador
    atualizarContadorCarrinho();
});

Considerações Adicionais

Esta solução permite uma grande flexibilidade, pois você pode disparar a atualização do contador do carrinho de compras ou de qualquer outro elemento HTMX em resposta a uma variedade de eventos, não apenas cliques de botão.

Isso é especialmente útil em aplicações complexas, onde múltiplas ações podem necessitar de atualizações em diferentes partes da página.

Conclusão

Disparar eventos HTMX manualmente com JavaScript nos oferece uma ferramenta poderosa para criar páginas web interativas e dinâmicas.

Seja atualizando um contador de carrinho de compras ou modificando qualquer outro elemento da página, esta técnica assegura que os usuários tenham uma experiência fluida e responsiva, sem recarregar a página.

Com essa abordagem, as aplicações web não só se tornam mais ágeis e eficientes, mas também mais agradáveis para o usuário final, reforçando os princípios de uma boa experiência do usuário (UX).

Por que dá pra disparar um hx-get com um evento inventado?

A sacada toda tá no hx-trigger

Ele não escuta só clique ou mudança de campo, ele escuta o NOME do evento que você escreveu ali dentro

Ou seja: você inventa um nome, coloca no hx-trigger e o elemento fica de orelha em pé esperando aquele evento pintar nele

Se você já usou addEventListener, é exatamente a mesma ideia, só que declarada no HTML em vez de escrita no JavaScript

Aí, quando o seu código dispara o evento com dispatchEvent, o elemento recebe o aviso e o htmx entende que chegou a vez dele de fazer a requisição

Repare que o seu JavaScript nunca chama o htmx direto

Ele só cutuca o elemento certo… e o htmx cuida do resto 🙂

Não funcionou? Confere isso antes de xingar o htmx:

O nome do evento tem que bater igualzinho

O nome que tá no hx-trigger e o nome que você passa no CustomEvent são a mesma string

Uma letra maiúscula diferente já mata o disparo, e o pior: não dá erro nenhum, simplesmente nada acontece

O elemento precisa existir na hora do disparo

Se o seu script roda antes do elemento aparecer na página, o getElementById volta vazio e o console reclama

Tome cuidado com script no topo do HTML e com elemento que só aparece depois de uma outra ação

Trocou o elemento inteiro? Os atributos precisam voltar junto

Esse é o que mais pega gente desprevenida

Quando o swap troca o elemento inteiro, quem estava na página some e entra o HTML que veio do servidor no lugar

Se esse HTML novo não trouxer os mesmos atributos do htmx, o elemento que ficou ali não escuta mais o seu evento

O primeiro disparo funciona lindo, o segundo não faz nada, e você fica olhando pro código achando que enlouqueceu

Já me ferrei uma vez por causa disso, então se o comportamento for esse, olha o HTML que o servidor devolve antes de qualquer outra coisa

O mesmo código em JavaScript moderno:

O exemplo acima usa var pra ficar bem clássico, mas hoje dá pra deixar isso bem mais limpo

const atualizarContadorCarrinho = () => {
const contador = document.getElementById('contador-carrinho')

if (!contador) return

contador.dispatchEvent(new CustomEvent('customEvent'))
}

document
.getElementById('botao-adicionar-carrinho')
?.addEventListener('click', () => {
adicionarItemAoCarrinho()
atualizarContadorCarrinho()
})

Muda pouca coisa e resolve dois problemas de uma vez: o if evita o erro no console quando o elemento ainda não existe, e o ?. evita quebrar a página inteira se o botão não estiver lá

O comportamento é o mesmo, só que sem susto 😀

Precisa mesmo de JavaScript nesse caso?

Vale a pergunta antes de sair escrevendo código

Se o evento que dispara a atualização já acontece no PRÓPRIO elemento, você declara isso direto no HTML e não escreve uma linha de JavaScript

O disparo manual brilha mesmo quando o gatilho tá em outro lugar da página, ou quando ele vem de uma lógica sua que roda depois de alguma coisa dar certo

É o caso do carrinho aqui do exemplo: o contador só atualiza depois que o item realmente entrou

Ou seja, disparar o hx-get na mão não é gambiarra, é o jeito de plugar o htmx no seu fluxo em vez de brigar com ele