Updating only a tr with ajax with returned mysql data

Question

Updating only a tr with ajax with returned mysql data

Asked 10 years, 6 months ago

Viewed 519 times

0

This is 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 form fields 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 are shown without giving a refresh on the page.

A question, you are aware of javascript? And jQuery?

– Marcelo Diniz

2014/05/21 at 13:38
I recommend you study ajax before asking again, make simple examples, after learning, formulate a possible solution, and then yes, post questions here.

– Marcelo Aymone

2014/05/21 at 13:57
The solution I want is for this book Box that this link http://paulocollares.com.br/book_caixa_demo/login.php the author made the code available and it is possible to see how the application works, if you access his site you will be able to see what I want to do. When accessing the application already falls in the movement of the month, ai if you want to edit a movement, it opens a TR that is hidden with a form inside, when you change, it gives a refresh on the page, and processes the page again. .

– Adrianoecris

2014/05/21 at 14:51

1 answer

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.

by mend3 • **1,410** points · Answer 1 · 2014-05-21T14:04:25+00:00

You can do it 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();
        }
    });
});