Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jackie Jen
2,723 Pointshow to update every row of specific column using ajax
i want to update every row at status column whenever there is changes in database. I'm using ajax to get data from database. the status column will update every 5 sec.
I have done the refresh every 5 sec part and i just stuck in how to update every row of status column. below is my code
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
setInterval(
function ()
{
$('#status').load('myphpfile.php').fadeIn("slow");
}, 5000); // refresh every 5000 milliseconds
//alert("yes");
</script>
<table>
<tr>
<th>shipment</th>
<th>destination</th>
<th>status</th>
</tr>
<?php $x=1;?>
<?php while($x <4) {?>
<tr >
<td>shipment<?php echo $x;?></td>
<td>destination<?php echo $x;?></td>
<td id="status">test<?php echo $x;?></td>
</tr>
<?php $x++;?>
<?php }?>
</table>
</body>
</html>
when i put an id="status" it just update the 1st row. Please advice
Regards
3 Answers
Chunwei Li
18,816 PointsHi Jackie,
Since you just post part of your code, I guess that it is because ID identifier is unique, so only row with specified ID will be updated. Could you please replace id with class, and have a try?
look forward to your response!
Iban Dominguez
17,973 PointsHi Jackie,
I am not quite sure how does the row look on the db, but if it was me I would do the following:
I would add a column to the table called created_at, data type timestamp, setting the time it was created at.
Then I would set an interval as you did, requesting via POST or GET, passing the last item retrieved timestamp. You can achieve this using an ajax call, jquery is pretty much ready for what you need.
Then within the php script I will query all entries where created at is greater than the parameter sent. return a json_encode array of posible rows.
Back in the js, I would check if the json array is not empty, using .count. If no results return you would do nothing but if there are some results, I would probably remove the old items and append the new ones to the table.
It might seem like a lot of code, and in fact is a bit more than what you already have, but pros are that you don´t have to query the whole page everytime, you would only play with some json data and only do certain actions if new records exists. It will make your code more effective.
cheers
Jackie Jen
2,723 PointsHi Iban,
From my code , i have 4 rows in the table and each row need to update based on the database. therefore the data to update in each row will be different. if i put the class="status"
<td class="status">test<?php echo $x;?></td>
let said In my json format and data is below
{
"data": [
[
"$320,800"
],
[
"$170,750"
],
[
"$170,421"
],
[
"$112,000"
]
]
}
The output will be combine all the data together
$320,800$170,750$170,421$112,000
I need the output to be like that on status column of every row
$320,800
$170,750
$170,421
$112,000
Regards
Iban Dominguez
17,973 PointsHi Jackie,
could please show me how is your code rendering those values?
cheers
Jackie Jen
2,723 PointsHi Iban,
originall output
shipment destination status
shipment1 destination1 test1
shipment2 destination2 test2
shipment3 destination3 test3
After 5 sec
shipment destination status
shipment1 destination1 $320,800
shipment2 destination2 $170,750
shipment3 destination3 $112,000
The status data i will get from database and based on the shipment Please advice
Regards
Jackie Jen
2,723 PointsJackie Jen
2,723 PointsHi Chunwei,
it work perfect. it update all the rows with class="status". But there is a problem. let said each row i want update with different data based on database. how does i defined the 1st row update with the 1st data i retrieve from database?
Regards