present goal: Use AJAX/Jquery to prepend 1 new row to my table every 10 seconds, then knock off the last row. future goal: use the data from each row to place a point on a map. current issues: removing the onclick and setting limits/timers on the prepend function so the table is only populated with one row every 10 seconds vs populating the table with everything that the data.php file has, does that make sense? $(document).ready(function() { $('#btnAdd').click(function getData() { // get data $.ajax({ url: '/ajax/data.php', type: "GET", cache: false, dataType: "json", error: function(data) { $("div#error").html('error: '+data); }, success: function postData(jsonObj) { $.each(jsonObj, function(index, value) { var newRow = $("<tr><td>"+value.icon+"</td><td>"+value.app+"</td><td>"+value.timestamp+"</td><td>"+value.location+"</td><td>"+value.comments+"</td></tr>"); $("#mainTable tbody").prepend(newRow); }); } }); }); }); Code (markup): I can paste my html if you want to see
here you go <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { setTimeout('getData()',10000); }); function getData() { // get data $.ajax({ url: '/ajax/data.php', type: "GET", cache: false, dataType: "json", error: function(data) { $("div#error").html('error: '+data); }, success: function postData(jsonObj) { $.each(jsonObj, function(index, value) { var newRow = $("<tr><td>"+value.icon+"</td><td>"+value.app+"</td><td>"+value.timestamp+"</td><td>"+value.location+"</td><td>"+value.comments+"</td></tr>"); $("#mainTable tbody").prepend(newRow); }); } }); setTimeout('getData()',10000); } </script> </head> <body> <table id="mainTable"> <tbody> </tbody> </table> </body> </html> Code (markup):
and with removing the last line would be <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { setTimeout('getData()',10000); }); function getData() { // get data $.ajax({ url: '/ajax/data.php', type: "GET", cache: false, dataType: "json", error: function(data) { $("div#error").html('error: '+data); }, success: function postData(jsonObj) { $.each(jsonObj, function(index, value) { var newRow = $("<tr><td>"+value.icon+"</td><td>"+value.app+"</td><td>"+value.timestamp+"</td><td>"+value.location+"</td><td>"+value.comments+"</td></tr>"); $("#mainTable tbody").prepend(newRow); $('#mainTable tbody tr:last-child').remove(); }); } }); setTimeout('getData()',10000); } </script> </head> <body> <table id="mainTable"> <tbody> <tr><td>1</td><td>a</td><td>a</td><td>a</td><td>a</td></tr> <tr><td>2</td><td>a</td><td>a</td><td>a</td><td>a</td></tr> <tr><td>3</td><td>a</td><td>a</td><td>a</td><td>a</td></tr> <tr><td>4</td><td>a</td><td>a</td><td>a</td><td>a</td></tr> <tr><td>5</td><td>a</td><td>a</td><td>a</td><td>a</td></tr> </tbody> </table> </body> </html> Code (markup):
Hi Stephan thank you for your response. That is exactly how I want to get my data, how would I now isolate the success and create a postData function so that the prepending row happens on a different time schedule than the get data function? Also when my php array is populated with 300 entries or more or less, how would I tell the jquery to pull the most recent entry and only display it? <?php $dataArray = array ( 'id1' => array ( 'icon' => '<img src="images/piicon.png">', 'app' => 'GGP', 'timestamp' => date('m/d/y'), 'location' => 'Bellevue', 'comments' => 'It works!', ), 'id2' => array ( 'icon' => '<img src="images/piicon.png">', 'app' => 'Meijer', 'timestamp' => date('m/d/y'), 'location' => 'San diego', 'comments' => 'It works!', ), 'id3' => array ( 'icon' => '<img src="images/piicon.png">', 'app' => 'Point Inside', 'timestamp' => date('m/d/y'), 'location' => 'Boston', 'comments' => 'I guess its working? Maybe not exactly what we want yet though?!', ) ); echo json_encode($dataArray); ?> PHP: thank you