reload multiple table cells with jQuery - php

Question

I have many forms in a page, each form with several inputs. When you click Submit on a form (say Form0), inputs are send to Reassign.php,that perform a search in a DB according to user inputs, and then a cell with div id="Cell0" in a table of the page is reloaded with data echoed by Reassign.php.
<script type="text/javascript">
$(document).ready(function(){
$("#Form0").submit(function(){
var MyVariables = $(this).serialize();
$('#Cell00').load('Reassign.php?MyVariables=' + MyVariables);
return false;
});
});
$(document).ready(function(){
$("#Form1").submit(function(){
var MyVariables = $(this).serialize();
$('#Cell10').load('Reassign.php?MyVariables=' + MyVariables);
return false;
});
});
</script>
A stripped down version of the table:
<table>
<tr>
<td><div id="Cell00"><img src="Image0.jpg"/></div></td>
<td><div id="Cell01">Text1</div></td>
<td><div id="Cell02">Price1</div></td>
<td><div>
<form name="Form0" id="Form0">
<input type="hidden" name="Qst" value="0">
<input type="image" src="ReloadRed.gif" alt="Submit"/>
<select name="cmb1"><option>cmb1Option1</option><option>cmb1Option2</option></select>
<select name="cmb2"><option>cmb2Option1</option><option>cmb2Option1</option></select>
</form>
</div>
</td>
</tr>
<tr>
<td><div id="Cell10"><img src="Image0.jpg"/></div></td>
<td><div id="Cell11">Text1</div></td>
<td><div id="Cell12">Price1</div></td>
<td><div>
<form name="Form1" id="Form1">
<input type="hidden" name="Qst" value="0">
<input type="image" src="ReloadRed.gif" alt="Submit"/>
<select name="cmb1"><option>cmb1Option1</option><option>cmb1Option2</option></select>
<select name="cmb2"><option>cmb2Option1</option><option>cmb2Option1</option></select>
</form>
</div>
</td>
</tr>
</table>
A sample Reassign.php:
<?php
session_start();
$MyVariables = $_GET['MyVariables '];
$cmb1 = $_GET['cmb1'];
$cmb2 = $_GET['cmb2'];
$cmb3 = $_GET['cmb3'];
parse_str($MyVariables);
$Preg=$MyVariables;
$link = mysql_connect("localhost", usr, pswrd) or die(mysql_error());
#mysql_select_db("MyDB") or die( "Unable to select database");
mysql_query ("SET NAMES 'utf8'");
$query = "SELECT Img FROM MyTable WHERE Column1=$cmb1 AND Column2=cmb2";
if($success = mysql_num_rows($result) > 0) {
while ($row = mysql_fetch_array($result)) {
$image="../ImageFolder/".$row[0].".png";
}
}
echo "<img src=\"".$image."\" />";
?>
This is OK.
Now I want other cells in the table to change as well, but with different (and related) data. Indeed, in the DB seach by Reassign.php, $row[0] is echoed (and thus loaded) in Cell00, and I want $row[1] to be send to Cell01, $row[2] to Cell02 and so on.
My problem is that right now I'm loading Cell0 echoing their content. I think i could do the job calling different php (Reassign0.php to echo data to Cell00, Reassign1.php to echo data to Cell01) but seems rather odd. Any ideas?

Answer 1

Here is a better approach... You can echo JSON instead of HTML from you PHP script, with all fields of the row. (Other code must be put in place for this to work for you, I'll let you research it on your own)
echo json_encode($row);
In your JS, get that json with $.getJSON(url, callback) or $.get(url, callback) depending on your server configuration
Then, loop through the cells and inject the data in your callback
$.getJSON('Reassign.php?MyVariables='+MyVariables, function(row){
for(i=0;i<row.length;i++){
$("#Cell0"+i).html(row[i]);
}
});
EDIT: if you data is not already formatted as HTML (like for images), be sure to do it in your callback. For example, if the first element is always an image URL and the rest is plain data, you can do :
$.getJSON('Reassign.php?MyVariables='+MyVariables, function(row){
for(i=0;i<row.length;i++){
var content = ( i == 0 ) ? '<img src="'+row[i]+'" alt="" />' : row[i];
$("#Cell0"+i).html(content);
}
});