refresh list field without refresh ajax

Question

refresh list field without refresh ajax

Navigation

#1 by (1 votes)

-3

I have the following list in jsp where I want to just increment the value of the quantity field, without refreshing the page.

The way I did it works, but refresh the page. For what I researched, it would have to be for Ajax.

<table>
   <tbody>
      <c:forEach items="${revistas}" var="r">
      <tr>
         <td>${r.nome }</td>
         <td>
            <form id="testeForm" action="<c:url value="/atualizaQuantidade"/>" method="post" >
               <input type="hidden" name="r.cod" id="cod" value="${r.cod}" />
               <input type="hidden" name="r.qtd" id="qtd" value="${l.qtd}" />
               <button type="submit" class="btn btn-primary">${r.qtd}</button>
            </form>
         </td>
      </tr>
      </c:forEach>
   </tbody>
</table>

As a list, I have to get the id of the magazine , the amount in the list and send it to my Java method to increment (that part I know how to do). Now doing this via Ajax, I'm lost. Could you help me?

javascript jquery ajax

asked by anonymous 09.12.2017 / 00:12

1 answer

Auto insert a string text [closed] Record with Tabs

score 1 · Accepted Answer

I think you should change the form tag to an ajax method next to the click event of a Button

Remove this snippet:

     <td>
        <form id="testeForm" action="<c:url value="/atualizaQuantidade"/>" method="post" >
           <input type="hidden" name="r.cod" id="cod" value="${r.cod}" />
           <input type="hidden" name="r.qtd" id="qtd" value="${l.qtd}" />
           <button type="submit" class="btn btn-primary">${r.qtd}</button>
        </form>
     </td>

Add this:

  <td>
      <button data-cod="${r.cod}" data-qtd="${r.qtd}" class="btn btn-primary btn-qtd-click">${r.qtd}</button>
 </td>

Finally the following js, using jQuery:

$(".btn-qtd-click).click(function(){ //Click no botão
    var $this = $(this); //Referência do botão que foi clicado

    $.ajax({
       type: "POST",
       url: "/atualizaQuantidade", //Url do serviço POST
       data: {//Valores que o serviço recebe
          cod: $this.attr("data-cod"), //Usando atributo adicionado no html
          qtd: $this.attr("data-qtd"),
       },
      //dataType: dataType 
    }).done(function(){
        //FAca algo aqui se ocorrer tudo certo

        //Exemplo, atualizando o valor informado no button
        //$this.html(Nova quantidade)

    }).fail(function(){
         //Faça algo caso falhe
    })
 });