Question

I’m trying to create an dynamic AJAX function using PHP and MySQL but have had little success so far. Its purpose is to update records in a database without refreshing the page or changing to another page.

On the page with the forms I have the following code:

// jQuery

<script type="text/javascript">
<?php 

$sql = "SELECT * from pm_schedule";
$result = $pdo->query($sql);

foreach ($result as $row) 
{
echo 
"$(document).ready(function() {
 $('#updatebtn".$row['id']."').click(function() {
 $('#result".$row['id']."').show('slow').delay(4000).hide('slow')
 $.post('process.php', $('#updateform".$row['id']."').serialize()) 
 });    
return false;   
});";
}
?>
</script> 

// form

$sql = "SELECT * from pm_schedule";
$result = $pdo->query($sql);
foreach ($result as $row) 
{
echo 
'<form id="updateform'.$row['id'].'">
<div class="tbl_header">'.$row['task'].'</div>

Due Date: 
<script>
$(function() {
$( "#datepicker'.$row['id'].'" ).datepicker({ minDate: -0,  
dateFormat: \'dd/mm/yy\', maxDate:  new Date(2013, 1,22) })
});
</script>
<input type="text" id="datepicker'.$row['id'].'" style="width: 100px; height: 10px;" value="'.$row['duedate'].'" name="duedate"/>&nbsp;

Status:
<select style="width: 125px;" name="status">
<option>'.$row['status'].'</option>
<option>----</option>
<option>Pending</option>
<option>In Progress</option>
<option>Complete</option>
</select>
&nbsp;

<input type="hidden" name="id" value="'.$row['id'].'">
<input type="submit" id="updatebtn'.$row['id'].'" value="Update" 
style="width: 100px;"/>
</form>

<div id="result'.$row['id'].'" style="display: none; color: red">
Update successful!
</div>
<p>';}

On the page responsible for the processing (process.php), I have the following code:

<?php
$name = mysql_real_escape_string($_POST["name"]);
$status = mysql_real_escape_string($_POST["status"]);
$id = mysql_real_escape_string($_POST["id"]);

$sql = "UPDATE pm_schedule SET name=?, status=?, id=? WHERE id=?";
$q = $conn->prepare($sql);
$q->execute(array($name,$status,$id));
?>

What am I doing wrong?

Answer 1

The return false is in the function called on $(document).ready, not in the click-handler, so I guess this causes the form to submit anyway after finishing the clickhandler. Maybe move the statement one line up:

echo 
"$(document).ready(function() {
   $('#updatebtn".$row['id']."').click(function() {
     $('#result".$row['id']."').show('slow').delay(4000).hide('slow');
     $.post('process.php', $('#updateform".$row['id']."').serialize());
     return false;
   }); 
 });";

As ripa said, a few more ; should be helpful either.