CODEWITHSUNDEEP
phpjquerymysqlajaxpdo
methuselah
methuselah

Reputation: 13206

jQuery AJAX issue - page keeps refreshing on submit and data not sent

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?

Upvotes: 0

Views: 883

Answers (2)

Clemens Klein-Robbenhaar
Clemens Klein-Robbenhaar

Reputation: 3527

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.

Upvotes: 1

Ripa Saha
Ripa Saha

Reputation: 2540

place ; over here

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;   
     });";
 }

Upvotes: 0

Related Questions