Ajax/Javascript -- Update table or rows dynamically

Posted on 2012-08-21
Last Modified: 2012-09-04
I'm using the following line to update in a javascript using Jquery/Ajax.

        $(\"#nodenumberX1\").load(\"index.php?section=nodeManagement&action=list #nodenumber1\");
      }, 15000);

What this does is updates anything in the nodenumber1 div declaration, which works fine in most cases.

However, when I try to do this to a row in a table (<table><tr id='nodenumber1'>..etc) This does not end up working correctly. What I want to do is update a individual row or the whole table.

The problem with updating the whole table is the table consists of showing and hiding content as well, thus when I wrap a div with the above coding, the whole table refreshes and whatever the user clicks to show information is reset after 15 seconds.

Does anyone have any ideas how to solve it? The general idea I want is to be able to update the whole table without losing what the user has selected, or update a individual row in the table which can be updated every X seconds.
Question by:Valleriani
    LVL 49

    Expert Comment

    by:Julian Hansen
    One solution is to have the row data returned as a JSON object and then write client side script to popuplate the specific cells of the row.

    Here is an illustration - non functional as I don't have all the info on your page.
    ...// event that triggers the update
      $.post('callback.php', {a: value1, b: value2 ...}, function(data) {
         if (data.status = 'ok') {
      }, 'json');

    Open in new window

    LVL 7

    Author Comment


    I'm not 100%  sure I follow you with how to add the data using JSON.

    I have an idea how to make the callback.php file by calling the mysql query in there and using something, but I'm not sure how to attempt to structure the return value. I'm getting something like $row[] = array('data' => $r);  for the data and echoing it back.

    But how do I use that trigger to each row? Would 'value1' be the ID of the row? Would I have to store a list of ID's then as well so I can call the proper row?

    Note though -- A simple one is the ID, name, and domain. for row names, but anything works.
    LVL 49

    Accepted Solution

    Sample callback (assumes data lookup - change to match your requirements)

    $id = empty($_POST['id']) ? 0 : $_POST['id'];
    $return = array('status' => 'fail');
    if ($id > 0) {
       // fetch records based on id here
       $return['row'] = array (
         array('name' => 'Fred', 'surname'=>'Smith'),
       $return['status'] = 'ok';

    Open in new window

    Sample calling script
    <!doctype html>
    <script src=""></script>
    <script type="text/javascript">
    $(function() {
      $('table tr').click(function() {
        var tr = $(this);
        $.post('t53.php', {id: $(this).attr('data-id')}, function(data) {
          if (data.status == 'ok') {
            for(i = 0; i < data.row.length;i++) {
               $('', tr).html(data.row[i].name);
               $('td.surname', tr).html(data.row[i].surname);
        }, 'json');
      <tr data-id="1">
        <td class="name">Bob</td><td class="surname">Jones</td>
      <tr data-id="2">
        <td class="name">Mary</td><td class="surname">James</td>
      <tr data-id="3">
        <td class="name">Greg</td><td class="surname">Hall</td>

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
    The viewer will learn how to dynamically set the form action using jQuery.

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now