Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Live table update using AJAX

8:57 am on May 22, 2012 (gmt 0)

Full Member

5+ Year Member

joined:Aug 3, 2010
posts: 243
votes: 0


I've got a table that I need to edit sometimes and instead of using phpMyAdmin I wanted to do it live. I found a fantastic script online which helps me do this but it isn't saving the changes to the database, only showing the new information on the screen until the page is refreshed.

Here's what draws the table (works great):

$color1 = "even";
$color2 = "odd";
$row_count = 0;
while($row=mysql_fetch_array($result1)) {
$row_color = ($row_count % 2) ? $color1 : $color2;
$id = $row['weighbridge_id'];
$ref = $row['weighbridge_ref'];
$in = $row['weighbridge_in'];
$out = $row['weighbridge_out'];
$receipt = $row['weighbridge_receipt'];
<tr id="<?php echo $id; ?>" class="edit_tr <?php echo $row_color; ?>">
<td class="edit_td"><span id="ref_<?php echo $id; ?>" class="text"><?php echo $ref; ?></span>
<input type="text" value="<?php echo $ref; ?>" class="editbox w140" id="ref_input_<?php echo $id; ?>" /></td>
<td class="edit_td"><span id="in_<?php echo $id; ?>" class="text"><?php if ($in == 0) { echo "&nbsp;"; } else { echo "&pound;" . $in; } ?></span>
<input type="text" value="<?php echo $in; ?>" class="editbox w80" id="in_input_<?php echo $id; ?>" /></td>
<td class="edit_td"><span id="out_<?php echo $id; ?>" class="text"><?php if ($out == 0) { echo "&nbsp;"; } else { echo "&pound;" . $out; } ?></span>
<input type="text" value="<?php echo $out; ?>" class="editbox w80" id="out_input_<?php echo $id; ?>" /></td>
<td class="edit_td"><span id="receipt_<?php echo $id; ?>" class="text"><?php echo $receipt; ?></span>
<input type="text" value="<?php echo $receipt; ?>" class="editbox w140" id="receipt_input_<?php echo $id; ?>" /></td>
<?php $row_count++; }?>

Here's the Javascript/Ajax code:

<script type="text/javascript">
var ID=$(this).attr('id');
var ID=$(this).attr('id');
var ref=$("#ref_input_"+ID).val();
var inn=$("#in_input_"+ID).val();
var out=$("#out_input_"+ID).val();
var receipt=$("#receipt_input_"+ID).val();
var dataString = 'id='+ ID +'&in='+inn+'&out='+out+'$receipt='+receipt;
//$("#ref_"+ID).html('<img src="load.gif" />'); // Loading image


type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
//window.location.replace("http://www.domain.com"); JUST TESTING
alert('Enter something.');


// Edit input box click action
return false

// Outside click action


So when I click on said row, it hides the text and displays the input box. I can then edit the value in the input box, click outside and the changes are made. However it isn't updating the database.

Here's table_edit_ajax.php:

include ('../includes/global.php');
$sql = "UPDATE weighbridge SET weighrbidge_ref='$ref', weighbridge_in='$in', weighbridge_out='$out', weighbridge_receipt=$receipt WHERE weighbridge_id='$id'";
$result = mysql_query($sql) or die(mysql_error());

I apologise that this post is rather long but I thought it'd be helpful to understand what's going on and maybe useful to others wanting to achieve the same thing.

11:48 pm on Aug 16, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5012
votes: 23

The values are escaped in the table_edit php file.

That won't help in the case that one of the strings contains something that breaks your dataString (in other words, it would arrive at the server already broken). Imagine a case where one of the strings contains an ampersand.

Glad it's working again. :)
This 31 message thread spans 2 pages: 31

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members