Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Ajax/Javascript -- Update table or rows dynamically

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

      setInterval(function(){
        $(\"#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.
0
Comment
Question by:Valleriani
  • 2
3 Comments
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38315631
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') {
        $('td.name').html(data.row.name);
        $('td.surname').html(data.row.surname);
     }
  }, 'json');

Open in new window

0
 
LVL 7

Author Comment

by:Valleriani
ID: 38315671
Hello!

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.
0
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38315746
Sample callback (assumes data lookup - change to match your requirements)

<?php

$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';
}

die(json_encode($return));
?>

Open in new window

Sample calling script
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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++) {
           $('td.name', tr).html(data.row[i].name);
           $('td.surname', tr).html(data.row[i].surname);
        }
      }
    }, 'json');
  });
});
</script>
</head>
<body>
<table>
  <tr data-id="1">
    <td class="name">Bob</td><td class="surname">Jones</td>
  </tr>
  <tr data-id="2">
    <td class="name">Mary</td><td class="surname">James</td>
  </tr>
  <tr data-id="3">
    <td class="name">Greg</td><td class="surname">Hall</td>
  </tr>
</table>
</body>
</html>

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

577 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