jQuery - Reload table

Question

I'm trying to reload a table which was also generated by PHP.

The table has an ID: #bookmarks

After the user pressed a button, the table should reload the content + the data they have just added. I'm a bit confused because I don't know how to send all of the data from a PHP result.

Thanks, James

Answer 1

When the user presses the button you should call the code that was used to load the table. The data might be the data from the beginning + the data the users added. Or the data might be reretrieved from the server, depending on how your application works.

A bit more info might clear things up, so we could give more specific answers.

Answer 2

In point form:

• Submit the user's data back to a PHP page via an AJAX request. (Look at the jQuery Form plugin)
• The PHP page should accept and validate the data, insert it into the database and then send a response back to the page in some format (I recommend JSON, using the php function json_encode.
  • The response should either be a "rejected" or an "accepted" with the user's data returned to them, cleaned up as required by your own system.
• Then in the AJAX success callback method, use jQuery to append the data into the table, or give them a message telling them why it was rejected.

Answer 3

This is assuming your PHP returns a ready-to-inject HTML code for the table:

$("#update_button").click(function(){
    $("#mytable").load("/tools/getTable.php")
})

in your page you need a DIV placeholder like this:

<div id="mytable"></div>

and your getTable.php needs to echo back html like this:

<table>
  <tr>
    <td>col1<td>
    <td>col2<td>
  <tr>
</table>

Answer 4

Well the table is generated using this:

<table id="bookmarks">
  <thead>
   <tr class="table-top">
    <th>Thumbnail</th>
    <th>Title/Description</th>
    <th>Tags</th>
    <th>Action</th>
   </tr>
  </thead>
  <?php
  $hID = userToID($_SESSION['username']);
  $hQuery = mysql_query("SELECT * FROM linkz WHERE userid='$hID'") or die(mysql_error());
  while($hRow = mysql_fetch_array($hQuery)) {
   echo "<tr class='link'><td><img src='http://www.thumbshots.de/cgi-bin/show.cgi?url=".$hRow["location"]."' /></td><td><a href='share/".$hRow['shareid']."'>".$hRow["title"]."</a> - <i>". $hRow["description"]."</i><br /><b>Share Link:</b> http://www.linkbase.us/share/".$hRow['shareid']."&lt;/td&gt;&lt;td&gt;".$hRow['tags']."&lt;/td&gt;&lt;td&gt;&lt;a href='#' id='".$hRow['shareid']."' class='delbutton'>Delete</a></td></tr>";
  }
 ?>
 </table>

Answer 5

For specific help using jQuery, check out the jEditable plugin which is designed to provide the ability to edit data in place. There's also instructions on how to collect the data and save it.

Answer 6

You'll need to look into the basics of AJAX first.

You'll need to learn how to walk before you can start running.

Search for some tutorials on Ajax, PHP & Ajax

Here and here are 2 to start with