1
resposta

Acionar função AJAX por eventListener

Olá.

Eu fiz recentemente o curso de JS e estou tentando aplicar o conhecimento nos novos projetos que estou estudando aqui. Sei que foi apresentado uma forma de ser feito aqui, mas desejo fazer com que o link de Decrementar do projeto CaelumEstoque funcione a partir de um eventListener. Contudo, para referenciar cada linha na tabela, foi ensinado que se deveria adicionar a variável junto com o ID do produto. Como faço pra poder passar o ID do td pra função por meio de um eventListener, sendo que não sei qual o valor que estará na variável no momento de execução (só consigo prever a string do ID)?

HTML

@model IList<CaelumEstoque.Models.Produto>
<table class="table table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Nome</th>
            <th>Qtde</th>
            <th>Qtde</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var produto in Model)
            {
            <tr>
                <td>@produto.Id</td>
                <td>
                    @Html.RouteLink(produto.Nome, "visualizaProduto", new { id = produto.Id })
                </td>
                <td class="quantidade" id="quantidade@(produto.Id)">
                    @produto.Quantidade
                </td>
                <td>
                    <a href="#" id="decrementar">Decrementar</a>
                </td>
            </tr>
        }
    </tbody>
</table>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

JS?

<script>
    function decrementa(params){
        var url = @Url.Action("DecrementaQtd", "Produto");
        var params = {id : produtoId}
        $.post(url, { id : params}, atualiza)
    }

    function atualiza(response){
        var element = $("#quantidade"+response.id);
        element.html(response.Quantidade);
    }

    var linkDec = $('#decrementar');

    linkDec.addEventListener('click', function(event){
        var qtdProduto = $("").html; //o que adicionar aqui?
        atualiza(qtdProduto);

    });

</script>

A aula com o exemplo em questão é a 09, AJAX. Obrigado.

1 resposta

No href do link de decrementar produto vc já deveria deixar a url montada, apontando para o endereço correto... no listener, vc faz um event.preventDefault() para interromper a navegação do link, pega a url e manda para onde vc quiser. Para pegar o link em si, acho que é só event.target

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software