Live table update using AJAX

[LinusIT]

Hi

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):

<?php
$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>
</tr>
<?php $row_count++; }?>

Here's the Javascript/Ajax code:

<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#ref_"+ID).hide();
$("#in_"+ID).hide();
$("#out_"+ID).hide();
$("#receipt_"+ID).hide();
$("#ref_input_"+ID).show();
$("#in_input_"+ID).show();
$("#out_input_"+ID).show();
$("#receipt_input_"+ID).show();
}).change(function()
{
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

if(ref.length>0)
{

$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
//window.location.replace("http://www.domain.com"); JUST TESTING
$("#ref_"+ID).html(ref);
$("#in_"+ID).html(inn);
$("#out_"+ID).html(out);
$("#receipt_"+ID).html(receipt);
}
});
}
else
{
alert('Enter something.');
}

});

// Edit input box click action
$(".editbox").mouseup(function()
{
return false
});

// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});
</script>

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:

<?php
include ('../includes/global.php');
if($_POST['id'])
{
$id=mysql_escape_string($_POST['id']);
$ref=mysql_escape_string($_POST['ref']);
$in=mysql_escape_string($_POST['in']);
$out=mysql_escape_string($_POST['out']);
$receipt=mysql_escape_string($_POST['receipt']);
$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.

Thanks

[Fotiman]

var dataString = 'id='+ ID +'&in='+inn+'&out='+out+'$receipt='+receipt;

I think that's supposed to be:

var dataString = 'id='+ ID +'&in='+inn+'&out='+out+'&receipt='+receipt;

That little mistake would mean that your sql string would be incorrect, as your $out value would contain too much data, and $receipt would be empty.

[LinusIT]

Well spotted.. I have changed the $ to an &, deleted all temporary files etc and tried again but it still does exactly the same.

You'll notice I put in window.location.replace("http://www.domain.com"); to test if it was getting as far as the success function and it does, hence is now commented out.

Can you suggest any error checking or something I can try to find out where it's going wrong?

Thanks

[Fotiman]

If you know the success callback was firing, then I would probably look at the PHP side of things. For example, try outputting your $sql variable to see what the server thinks it's doing, and then examining the result in your callback (you could just alert it for that matter).

<?php 
include ('../includes/global.php'); 
if($_POST['id']) 
{ 
$id=mysql_escape_string($_POST['id']); 
$ref=mysql_escape_string($_POST['ref']); 
$in=mysql_escape_string($_POST['in']); 
$out=mysql_escape_string($_POST['out']); 
$receipt=mysql_escape_string($_POST['receipt']); 
$sql = "UPDATE weighbridge SET weighrbidge_ref='$ref', weighbridge_in='$in', weighbridge_out='$out', weighbridge_receipt=$receipt WHERE weighbridge_id='$id'"; 
echo $sql;
$result = mysql_query($sql) or die(mysql_error()); 
} 
else 
{
echo "Missing id";
}
?>

Then:

success: function(html) 
{ 
alert(html);
//window.location.replace("http://www.domain.com"); JUST TESTING 
$("#ref_"+ID).html(ref); 
$("#in_"+ID).html(inn); 
$("#out_"+ID).html(out); 
$("#receipt_"+ID).html(receipt); 
} 

[LinusIT]

Your a star, thank you..

I had mispelt weighbridge (as you can see above weighbridge_ref) and $receipt needed to be enclosed in '' to prevent errors.

It's working now so I'm rather happy.

One other thing this page has is a balance, which is basically the sum of "in" minus the sum of "out" giving a balance. The balance doesn't update until the page is refreshed. Am I best of using window.location.replace to refresh the page or is there another way of doing it?

Thanks again.

[Fotiman]

The balance doesn't update until the page is refreshed.

That would seem to defeat the purpose of using AJAX then. :)
Another method for refreshing would be:
window.location = window.location;

However, if you know the "in" value, and you know the "out" value, couldn't you just update the balance using JavaScript instead of refreshing?

Also, one more bit of advice... mysql_escape_string has been deprecated and replaced with mysql_real_escape_string [php.net].

[LinusIT]

Your exactly right, it does defeat the purpose apart from it's so easy to edit the data.

To put you in the picture, here's how the balance works:

<tr>
<?php
$balance_sql="SELECT SUM(weighbridge_in) AS invalue, SUM(weighbridge_out) AS outvalue FROM weighbridge WHERE weighbridge_date >= DATE(NOW())";
$balance_result = mysql_query($balance_sql) or die(mysql_error());
while($balance_row=mysql_fetch_array($balance_result)) {
$sum_in = $balance_row['invalue'];
$sum_out = $balance_row['outvalue'];
$balance = $sum_in - $sum_out;
$class = (($balance < 1000) ? 'red' : (($balance < 3000) ? 'orange' : 'green' ))
?>
<td colspan="4"><h1 class="<?php echo $class ?>">Balance: &pound;<?php echo number_format($balance,2); ?></h1></td>
</tr>
<?php } ?>

The only way I can see of updating the balance is by refreshing the page which is quite disappointing.

Thanks for the hint, I'll update that code now.

[Fotiman]

What if your table_edit_ajax.php was modified to perform this as well, and you returned the result, number_format($balance,2), as part of the AJAX response?

<?php 
include ('../includes/global.php'); 
if($_POST['id']) 
{ 
$id=mysql_escape_string($_POST['id']); 
$ref=mysql_escape_string($_POST['ref']); 
$in=mysql_escape_string($_POST['in']); 
$out=mysql_escape_string($_POST['out']); 
$receipt=mysql_escape_string($_POST['receipt']); 
$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()); 

$balance_sql="SELECT SUM(weighbridge_in) AS invalue, SUM(weighbridge_out) AS outvalue FROM weighbridge WHERE weighbridge_date >= DATE(NOW())"; 
$balance_result = mysql_query($balance_sql) or die(mysql_error()); 
while($balance_row=mysql_fetch_array($balance_result)) { 
$sum_in = $balance_row['invalue']; 
$sum_out = $balance_row['outvalue']; 
$balance = $sum_in - $sum_out; 
$class = (($balance < 1000) ? 'red' : (($balance < 3000) ? 'orange' : 'green' )) 

echo "{balance: '" . number_format($balance,2) . "',class: '" . $class . "'}";
} 
else 
{
echo "{error: 'Missing id'}";
}
?>

Then add to your AJAX request:
dataType: "json"

Then in your success handler, check to see if html.error, and if it's undefined/null, then find the <h1> element where you show the balance, update it's class, and update it's innerHTML. You'll probably want to give it an id to make it easy to find.

That would save you from having to do a refresh.

[Fotiman]

Note, "class" might not be a safe name to use on the JSON object returned... so you might rename that in my example.

[LinusIT]

Your idea is wicked, I've tried to implement it but am getting some errors which I cannot see why.

Here's the up to date code with all the corrections from this post:

<?php
include ('../includes/global.php');
if($_POST['id']) {
$id=mysql_real_escape_string($_POST['id']);
$ref=mysql_real_escape_string($_POST['ref']);
$in=mysql_real_escape_string($_POST['in']);
$out=mysql_real_escape_string($_POST['out']);
$receipt=mysql_real_escape_string($_POST['receipt']);
$sql = "UPDATE weighbridge SET weighbridge_ref='$ref', weighbridge_in='$in', weighbridge_out='$out', weighbridge_receipt='$receipt' WHERE weighbridge_id='$id'";
$result = mysql_query($sql) or die(mysql_error());
$balance_sql="SELECT SUM(weighbridge_in) AS invalue, SUM(weighbridge_out) AS outvalue FROM weighbridge WHERE weighbridge_date >= DATE(NOW())";
$balance_result = mysql_query($balance_sql) or die(mysql_error());
while($balance_row=mysql_fetch_array($balance_result)) {
$sum_in = $balance_row['invalue'];
$sum_out = $balance_row['outvalue'];
$balance = $sum_in - $sum_out;
$class = (($balance < 1000) ? 'red' : (($balance < 3000) ? 'orange' : 'green' ))
echo "{balance: '" . number_format($balance,2) . "', class: '" . $class . "'}";
}
else
{
echo "{error: 'Missing id'}";
}
?>

The software I use says I have an error on the lines in bold, I really can't see why though. No matter what I try I can't get rid of these errors.

If you could explain a little more on how to update the balance I would appreciate it. My knowledge of AJAX is really limited, like to learn though.

[Fotiman]

Is there an error message that might indicate what is wrong? It's been a while since I've done any PHP, so perhaps I have the quotes wrong. But I think it's probably a problem with the { } characters. Maybe give this a try in place of the current echo line:

$arr = array("balance" => number_format($balance,2), "class" => $class);
echo json_encode($arr);

Also, replace the "Missing id" bit with this:

$arr = array("error" => "Missing id");
echo json_encode($arr);

[LinusIT]

There are no error messages, I use PHP all the time and it's baffled me so I've ended up cheating for now (you'll see what I've commented out).

<?php
include ('../includes/global.php');
if($_POST['id']) {
$id=mysql_real_escape_string($_POST['id']);
$ref=mysql_real_escape_string($_POST['ref']);
$in=mysql_real_escape_string($_POST['in']);
$out=mysql_real_escape_string($_POST['out']);
$receipt=mysql_real_escape_string($_POST['receipt']);
$sql = "UPDATE weighbridge SET weighbridge_ref='$ref', weighbridge_in='$in', weighbridge_out='$out', weighbridge_receipt='$receipt' WHERE weighbridge_id='$id'";
$result = mysql_query($sql) or die(mysql_error());
$balance_sql="SELECT SUM(weighbridge_in) AS invalue, SUM(weighbridge_out) AS outvalue FROM weighbridge WHERE weighbridge_date >= DATE(NOW())";
$balance_result = mysql_query($balance_sql) or die(mysql_error());
while($balance_row=mysql_fetch_array($balance_result)) {
$sum_in = $balance_row['invalue'];
$sum_out = $balance_row['outvalue'];
$balance = $sum_in - $sum_out;
$class = (($balance < 1000) ? 'red' : (($balance < 3000) ? 'orange' : 'green' ));
echo "{balance: '" . number_format($balance,2) . "', class: '" . $class . "'}";
}}
//else
//{
//echo "{error: 'Missing id'}";
//}}

?>

Using the above doesn't give me any errors.

I've reinstated the alert and it comes back with the correct balance and class.

All I need to achieve now is putting that information back into the page without refreshing.

[Fotiman]

I think you were missing a } in the first example you posted. I've reformatted it to make it obvious:

<?php 
include ('../includes/global.php'); 
if($_POST['id']) { 
  $id=mysql_real_escape_string($_POST['id']); 
  $ref=mysql_real_escape_string($_POST['ref']); 
  $in=mysql_real_escape_string($_POST['in']); 
  $out=mysql_real_escape_string($_POST['out']); 
  $receipt=mysql_real_escape_string($_POST['receipt']); 
  $sql = "UPDATE weighbridge SET weighbridge_ref='$ref', weighbridge_in='$in', weighbridge_out=' $out', weighbridge_receipt='$receipt' WHERE weighbridge_id='$id'"; 
  $result = mysql_query($sql) or die(mysql_error()); 
  $balance_sql="SELECT SUM(weighbridge_in) AS invalue, SUM(weighbridge_out) AS outvalue FROM weighbridge WHERE weighbridge_date >= DATE(NOW())"; 
  $balance_result = mysql_query($balance_sql) or die(mysql_error()); 
  while($balance_row=mysql_fetch_array($balance_result)) { 
    $sum_in = $balance_row['invalue']; 
    $sum_out = $balance_row['outvalue']; 
    $balance = $sum_in - $sum_out; 
    $class = (($balance < 1000) ? 'red' : (($balance < 3000) ? 'orange' : 'green' )) 
    echo "{balance: '" . number_format($balance,2) . "', class: '" . $class . "'}"; 
  }
// MISSING } HERE!  
else 
{ 
  echo "{error: 'Missing id'}"; 
} 
?>

[Fotiman]

Actually, I have that incorrect (the missing } is before the first echo):

<?php 
include ('../includes/global.php'); 
if($_POST['id']) { 
  $id=mysql_real_escape_string($_POST['id']); 
  $ref=mysql_real_escape_string($_POST['ref']); 
  $in=mysql_real_escape_string($_POST['in']); 
  $out=mysql_real_escape_string($_POST['out']); 
  $receipt=mysql_real_escape_string($_POST['receipt']); 
  $sql = "UPDATE weighbridge SET weighbridge_ref='$ref', weighbridge_in='$in', weighbridge_out=' $out', weighbridge_receipt='$receipt' WHERE weighbridge_id='$id'"; 
  $result = mysql_query($sql) or die(mysql_error()); 
  $balance_sql="SELECT SUM(weighbridge_in) AS invalue, SUM(weighbridge_out) AS outvalue FROM weighbridge WHERE weighbridge_date >= DATE(NOW())"; 
  $balance_result = mysql_query($balance_sql) or die(mysql_error()); 
  while($balance_row=mysql_fetch_array($balance_result)) { 
    $sum_in = $balance_row['invalue']; 
    $sum_out = $balance_row['outvalue']; 
    $balance = $sum_in - $sum_out;
  // MISSING } HERE! 
  $class = (($balance < 1000) ? 'red' : (($balance < 3000) ? 'orange' : 'green' )) 
  echo "{balance: '" . number_format($balance,2) . "', class: '" . $class . "'}"; 
} 
else 
{ 
  echo "{error: 'Missing id'}"; 
} 
?>

[LinusIT]

Thanks for that, the PHP side of it is working fine now. The success alert contains the correct balance and class colour as well.

Can you assist me with the last part using JSON please.

[Fotiman]

Sure, just to be clear, you mean this right?

Then add to your AJAX request:
dataType: "json"

Then in your success handler, check to see if html.error, and if it's undefined/null, then find the <h1> element where you show the balance, update it's class, and update it's innerHTML. You'll probably want to give it an id to make it easy to find.

The first is easy, just change this:

$.ajax({ 
type: "POST", 
url: "table_edit_ajax.php", 
data: dataString, 
cache: false, 

to this:

$.ajax({ 
type: "POST", 
url: "table_edit_ajax.php", 
data: dataString, 
dataType: "json",
cache: false, 

Then in your success handler:

success: function(html) 
{ 
 if (html.error) {
  // There was an error (missing id)
 }
 else {
  //window.location.replace("http://www.domain.com"); JUST TESTING 
  $("#ref_"+ID).html(ref); 
  $("#in_"+ID).html(inn); 
  $("#out_"+ID).html(out); 
  $("#receipt_"+ID).html(receipt); 
  $(YOURIDHERE).html(html.balance);
  $(YOURIDHERE).addClass(html.class);
 }
} 

Note, those lines with YOURIDHERE are where you'd update the balance and class in your page. I'm sure you'll probably need to tweak that some because you'll want to remove any existing class first (as opposed to just adding one), but hopefully that's enough to get you started. :)

[LinusIT]

Thanks Fotiman for all your help. I used the examples you posted above but I still can't get it working properly.

If I commented out dataType: "json", then the alert still works. The information inside the alert is correct. Once I've commented out the alert the information on the page is updated for that particular row.

Once I uncomment dataType: "json", the alert stops working. I have to comment this out before going any further. When I edit a row the new/changed data isn't being displayed until I refresh the page along with the balance staying the same until refreshed as well.

I've changed the Balance code to the following:

<h1 id="balance" class="<?php echo $class ?>">Balance: &pound;<?php echo number_format($balance,2); ?></h1>

Also the AJAX code:

$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
//dataType: "json",
cache: false,
success: function(html)
{
if (html.error) {
// There was an error (missing id)
} else {
//alert(html);
//window.location.replace("index2.php");
$("#ref_"+ID).html(ref);
$("#in_"+ID).html(inn);
$("#out_"+ID).html(out);
$("#receipt_"+ID).html(receipt);
$("#balance").html(html.balance);
//$("#balance").addClass(html.class); //SORT AFTER
}

Any ideas?

[Fotiman]

I would try it with the dataType: "json", then use my previous suggestion for outputting JSON data:

$arr = array("balance" => number_format($balance,2), "class" => $class);
echo json_encode($arr);

etc. If that doesn't work, then any chance you can send me a URL to look at?

[LinusIT]

I'd forgotton about the post where you mentioned $arr and json_encode, sorry.

It's working now, thank you very much.

I've changed

echo "{balance: '" . number_format($balance,2) . "', class: '" . $class . "'}";

to

$arr = array("balance" => "Balance: &pound;" . number_format($balance,2), "class" => $colour);

This is so the word "Balance" and pound sign are displayed.

I can't get the class change to work now, I have renamed "class" to "colour". Just as you said, it wasn't safe name to use.

Also, is it possible to change these two lines to include the pound sign on return?

$("#in_"+ID).html(inn);
$("#out_"+ID).html(out);

I have tried to ammend these lines but I keep getting errors (still learning).

Thanks again

[LinusIT]

From what I've found I can use .removeClass('classproperty') but that would mean I'd have to know what the class is.

This particular class is dynamic based on the value of "Balance" so I'm not sure if this is possible.

[Fotiman]

You could just remove all of the classes first:

$("#balance").removeClass('red orange green').addClass(html.class);

As to your other question, have you tried this:

$("#in_"+ID).html("&pound;" + inn);
$("#out_"+ID).html("&pound;" + out);

[LinusIT]

That works great, awesome. I've learnt really well from this thread, so thank you.

One last thing though :)

The thing I'm working on is similar to a bank statement, showing in and out figures but only one on each line. As you'll see from my code if $in or $out = 0 it displays nothing, keeps it nice and tidy.

When I update a row now, I get the pound sign in both columns until I refresh the page.

I've written this little bit of code thinking it would work but it doesn't.

if (html.inn >= 0) {
$("#in_"+ID).html("Right &pound;" + inn);
}
else
{
$("#in_"+ID).html("Wrong " + inn);
}

As an example when I update a row I end up with "Wrong 3.00" (3.00 being what I typed in).

I hope I've made sense of this last problem and it can be tweaked. If not then I'll have to choose between having the £ sign on update or not.

[Fotiman]

Your condition is testing:
html.inn
Whereas you're using just "inn" in the output. I suspect html.inn is undefined. :)

Also, I was going to make one more suggestion. Instead of passing "Balance: &pound;" in your JSON data, append it with your JavaScript instead. In other words, keep your array simple:

$arr = array("balance" => number_format($balance,2), "class" => $colour);

Then append it in the JavaScript like so:

$("#balance").html("Balance: &pound;" + html.balance);

[LinusIT]

That makes much more sense, keeping the array simple and doing other bits within the Javascript.

I see what you mean that html.inn could be undefined. Looking at all the code I've got so far I can't see what else I can use, maybe my thinking is all wrong.

Correct me if I'm wrong (most likely)

Before adding the £ signs we used $("#in_"+ID).html(inn); which is the value that is displayed after update. My thinking is that the javascript can read this figure and then I can do something with it.

I can't use the term "in" within my javascript as this is a reserved word. I can try testing my IF statement on the out part as this isn't a reserved word.

[Fotiman]

Right, basically your conditional should be changed from this:

if (html.inn >= 0) { 
$("#in_"+ID).html("Right £" + inn); 
} 
else 
{ 
$("#in_"+ID).html("Wrong " + inn); 
}

to this:

if (inn >= 0) { 
$("#in_"+ID).html("Right £" + inn); 
} 
else 
{ 
$("#in_"+ID).html("Wrong " + inn); 
}

[LinusIT]

After much fiddling about (not knowing Javascript if conditions very well) I've got it working.

if (inn > 0) {
$("#in_"+ID).html("&pound;" + inn);
$("#out_"+ID).html(out);
}
else
{
$("#out_"+ID).html("&pound;" + out);
$("#in_"+ID).html(inn);
}

Thank you for all your help with this.

[Fotiman]

Glad you got it sorted. :)

[LinusIT]

Didn't want to start a new thread as it's to do with exactly the same as above. Basically I have had to recreate the system I had and am struggling with one little bit on this, I've got most of it working but am severely stuck now.

I believe the problem lies within the javascript, the updating of the database works fine.

Javascript:

<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#ref_"+ID).hide();
$("#in_"+ID).hide();
$("#out_"+ID).hide();
$("#detail_"+ID).hide();
$("#ref_input_"+ID).show();
$("#in_input_"+ID).show();
$("#out_input_"+ID).show();
$("#detail_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var ref=$("#ref_input_"+ID).val();
var inn=$("#in_input_"+ID).val();
var out=$("#out_input_"+ID).val();
var detail=$("#detail_input_"+ID).val();
var dataString = 'id='+ ID +'&ref='+ref+'&in='+inn+'&out='+out+'&detail='+detail;
//$("#ref_"+ID).html('<img src="load.gif" />'); // Loading image

if(ref.length>0)
{
alert(dataString);
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
dataType: "json",
cache: false,
success: function(html)
{
if (html.error) { // There was an error (missing id)
}
else
{
//alert(html);
$("#ref_"+ID).html(ref);
if (inn > 0) {
$("#in_"+ID).html("&pound;" + inn);
$("#out_"+ID).html(out);
}
else
{
$("#out_"+ID).html("&pound;" + out);
$("#in_"+ID).html(inn);
}
$("#receipt_"+ID).html(receipt);
$("#balance").html(html.balance);
$("#balance").removeClass('red orange green').addClass(html.colour);
}
}
});
}
else
{
alert('Enter something.');
}

});
$(".editbox").mouseup(function()
{
return false
});
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});
</script>

Same issue as I had before further up the thread, when using "dataType: "json",". If I use alert(html) in the success handler I get [object Object]. If I comment out "dataType: "json" then I get the correct balance and colour.

I've tried my hardest to solve this myself as it was working before but I can't see what's wrong.

Any help would be greatly received, thanks.

[Fotiman]

when using "dataType: "json",". If I use alert(html) in the success handler I get [object Object]

That is the expected behavior. When using dataType: "json", you're saying that the result of the request is going to be a JavaScript Object Literal, as opposed to XML or HTML. For debugging purposes, try alerting JSON.stringify(html) instead (you'll need a modern browser).

A few side notes...

success: function (html) {

Since this is actually returning a JSON object, "html" is not a very good name for the parameter. You might consider changing it to "obj" or "o" or "data" or "result" or something along those lines.

var dataString = 'id=' + ID + '&ref=' + ref + '&in=' + inn + '&out=' + out + '&detail=' + detail;

I think you'll want to escape those values.

[LinusIT]

I've got it working now but without knowing what I did to make it work.

I printed out this thread and went through it line by line. The values are escaped in the table_edit php file.

I'll change the parameter & bear that in mind for all future JSON code. To be honest I wasn't aware of what the "(html)" bit was for.

Thanks