Using Prototype and Ajax to display and update tables

ptmuldoon

10-30-2008, 08:44 PM

I'm working on a little project, and from the php forums, have learned a little bit about the prototype framework, and Ajax. I've good an decent grasp on php, but how to utilize php with javascript is something still new to me.

From this post in the php forums Here (http://209.188.89.109/showthread.php?t=150860), I was able to successfully query a database, and display the table/results.

Then beneath the table, I have form that via Ajax will display the results of the forms inputs.

Now I'd like to have the table update via ajax on the form submit. Below is the code that I've currently put together.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>AJax Testing Script</title>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function liveStuff()
{
var ajax = new Ajax.Updater(
{
success: 'results'
},
'backside_script.php',
{
parameters: $('myForm').serialize(true)
}
);
}
</script>
</head>
<body>
<?
$mysql_hostname = 'localhost';
$mysql_username = 'username';
$mysql_password = 'password';
$conn = mysql_connect($mysql_hostname, $mysql_username, $mysql_password) or die('MySQL error: ' . mysql_errno() . ' ' . mysql_error());

$test = 'test_dual';
// test for conn
mysql_select_db($test) or die('MySQL error: ' . mysql_errno() . ' ' . mysql_error());

$query = mysql_query("SELECT * FROM mydatabases ");
while ($data = mysql_fetch_assoc($query)) {
$dataArray[] = $data;
$rows = count($dataArray);
}

if($rows == 0)
{
echo 'There are no additional tables';
} else {
echo '<table border=1>
<tr>
<td>ID</td>
<td>Database</td>
<td>Table</td>
<td>User Field</td>
<td>Password Field</td>
<td>Email Field</td>
</tr>';
for($x=0; $x < $rows; $x++){
echo '<tr>';
foreach($dataArray[$x] as $key => $value){
echo '<td>'.$value.'</td>';
}
echo '</tr>';
}
echo '<tr><td colspan="6"> Add New Table</td></tr>';
echo '</table>';
}
?>

<form id="myForm" name="myForm" method="post" action="" onsubmit="liveStuff();return false;">
<table border='1'>
<tr><td>Database Name</td><td><input name="input[db_field]" type="text"></input></td></tr>
<tr><td>Table Name</td><td><input name="input[table_field]" type="text"></input></td></tr>
<tr><td>User Field</td><td><input name="input[ufield]" type="text"></input></td></tr>
<tr><td>Password Field</td><td><input name="input[pfield]" type="text"></input></td></tr>
<tr><td>Email Field</td><td><input name="input[efield]" type="text"></input></td></tr>
<tr><td colspan="2"><input name="submit" id="submit" type="submit" value="Submit Ajax"></input></td></tr>
</table>
</form>

<div id="results"></div>
</body>
</html>

ohgod

10-30-2008, 09:35 PM

first step: review your Ajax.Updater syntax as i said in the other thread.... you're trying to use it like Ajax.Request

ptmuldoon

10-31-2008, 01:17 AM

Ok, I got that completed. Using the function and the revised submit to call the backend script on the mousedown.

Now, I'm guessing the next step is that the table would be initially be loaded from the backend script, and not from the same page/script that the form is on?

And then when you hit submit to update, it will access the back end script, perform the update and reload it?

ohgod

11-03-2008, 02:38 PM

you could have it make a request to get the info upon loading, but to be honest it's just as easy to make your query with php and display the results. i have to imagine it would load smoother since the query would be done before the page loads instead of after it.

anyhoo, from there yes you can either have the table rebuilt on your processor page and then redisplayed (the way to go if you have any sort of ordering) or you can append the results with the "insertion" option of Ajax.Updater (http://www.prototypejs.org/api/ajax/updater)

rebuilding the table is easier imo. and like i said, if you're doing ordering you kinda have to. but, if it was a massive table then appending would be faster.

ptmuldoon

11-04-2008, 12:29 AM

Thanks for the help.

I think I got it working. And now it got me thinking.....

Using the prototype (or in general), is it update/change an image file on the page? So if I had image_1.png. I could change it to image_2.png via a call to the back end script?

hinch

11-04-2008, 12:34 AM

you can do image swapping with simple arrays and normal javascript

ptmuldoon

11-04-2008, 01:13 PM

you can do image swapping with simple arrays and normal javascript

Thanks. But if I want to do a first compare/computation, and then update the image, would it best to do it via some type of Ajax application?

I have a current game that will update an image after a battle occurs to show how many units they have left. So if I have:

$x > 5; give me image_5.png
$x < 5; give me image_1.png

I would think using the prototype framework, and a backend script, I could compute a battle outcome, and then update the image without a page refresh.

ohgod

11-05-2008, 01:57 PM

i've never fiddled with it, but i would think you'd be able to drop <img> tags with the src you want and it would work.