Updating only a tr with ajax with data returned from mysql

Question

Updating only a tr with ajax with data returned from mysql

Navigation

#1 by (1 votes)

0

This is the HTML code assuming it has already been processed by PHP.

<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>nome</td>
    <td>endereço</td>
    <td>tel</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Adriano</td>
    <td>Rua Rio de Janeiro</td>
    <td>35744455</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <form name="form1" method="post" action="">
    <td><label for="nome"></label>
      <input name="nome" type="text" id="nome" value="Adriano"></td>
    <td><input name="endereco" type="text" id="endereco" value="Rua Rio de Janeiro"></td>
    <td><input name="tel" type="text" id="tel" value="35744455"></td>
    <td><input type="submit" name="button" id="button" value="Submit"></td>
    </form>
  </tr>
  <tr>
    <td>Irma</td>
    <td>Rua Mato Gross</td>
    <td>35744455</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <form name="form2" method="post" action="">
    <td><input name="nome" type="text" id="nome" value="Irma">
    </td>
    <td><input name="endereco" type="text" id="endereco" value="Rua Mato Gross"></td>
    <td><input name="tel" type="text" id="tel" value="35744455"></td>
    <td><input type="submit" name="button" id="button" value="Submit"></td>
  </form>
  </tr>
  <tr>
   <td>Cristiane</td>
    <td>Rua São Paulo</td>
    <td>35744455</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <form name="form3" method="post" action="">
    <td><input name="nome" type="text" id="nome" value="Cristiane">
    </td>
    <td><input name="endereco" type="text" id="endereco" value="Rua São Paulo"></td>
    <td><input name="tel" type="text" id="tel" value="35744455"></td>
    <td><input type="submit" name="button" id="button" value="Submit"></td>
    </form>
  </tr>
</table>

There is a <tr> with the data returned from the database and just below another <tr> with fields of a form filled with the same values already displayed waiting to be updated by the user.

The program will change the data, return and update only the <tr> where the data is shown without giving a refresh on the page.

javascript ajax

asked by anonymous 21.05.2014 / 03:42

1 answer

Problems with the gm (GraphicsMagick) module and node.js Error consuming method of a web service rest

score 1 · Accepted Answer

You can do this by using the success callback of your ajax request:

$(document).on('click', '#button', function() {
    // armazena o botão do formulário que está requisitando o ajax
    var caller = $(this);
    $.ajax({
        type: "POST",
        url: "index.php",
        data: caller.parents('form').serialize(),
        dataType: "json",
        success: function(data) {
            // console.debug(data);
            // pega a <tr> do botão clicado e faz alguma coisa
            caller.parents('tr').doSomething();
        }
    });
});