Peter Peter - 2 months ago 11
Ajax Question

Ajax execute successfully but didn't update database

I have table with edit button on each row. Then I have ajax function which on button edit/save should save new value in database but doesn't update it.

In console I see that it is returning

Success
and the parameters are passed correctly.

This is the buttons that I have

foreach ($row as $r){
echo '<tr id="row-'.$r['rate_id'].'">
<td id="people-'.$r['number_of_people'].'">'.$r['number_of_people'].'</td>
<td id="price_val-'.$r['rate_id'].'">$ '.$r['price_per_people'].'</td>
<td>
<button id="edit_button'.$r['rate_id'].'" onclick="edit_row('.$r['rate_id'].')" class="btn btn-primary edit_button">Edit</button>
<input type="button" class="save_button" id="save_button'.$r['rate_id'].'" value="save" onclick="save_row('.$r['rate_id'].')">
</td>
</tr>';
}


The ajax function

function edit_row(id)
{
var price=document.getElementById("price_val-"+id).innerHTML;
document.getElementById("price_val-"+id).innerHTML="<input type='text' id='price-"+id+"' value='"+price+"'>";

document.getElementById("edit_button"+id).style.display="none";
document.getElementById("save_button"+id).style.display="block";
}

function save_row(id)
{
var price=document.getElementById("price-"+id).value;

$.ajax
({
type:'post',
url:'includes/update.php',
data:{
edit_row:'edit_row',
row_id:id,
price_val:price,
},
success:function(response) {
if(response=="success")
{
document.getElementById("price_val-"+id).innerHTML=price;
document.getElementById("edit_button"+id).style.display="block";
document.getElementById("save_button"+id).style.display="none";
}
}
});
}


And this is the update.php

require 'connection.php';

if(isset($_POST['edit_row']))
{


$sql = "UPDATE new_rates SET price_per_people = :price_for_people WHERE rate_id = :rate_id";
$stmt = $db_con->prepare($sql);
$stmt->bindParam(':price_for_people', $_POST['price_val']);
$stmt->bindParam(':rate_id', $_POST['row_id']);
$stmt->execute();

echo "success";
exit();
}


In console I see

edit_row:edit_row
row_id:1
price_val:$ 12


which seems correct except I'm not sure for the dollar sign
$
since I didn't save it in database. Must save only the price
12
.

Can someone help me to clean this a bit and make it work? Since
success
is coming on console I'm a bit lost what can be the problem.

Answer Source

Instead of creating and removing the <input> field, I would just hide it and toggle its visibility. For example

foreach ($row as $r) : ?>
<tr id="row-<?= $r['rate_id'] ?>">
  <td id="people-<?= $r['number_of_people']?>"><?= $r['number_of_people'] ?></td>                        
  <td>
    $ <span id="price_val-<?= $r['rate_id'] ?>"><?= $r['price_per_people']?></span>
    <input style="display:none" type="number" min="0.00" step="0.01" value="<?= $r['price_per_people'] ?>" id="price-<?= $r['rate_id'] ?>">
  </td>
  <!-- and so on -->
</tr>
<?php endforeach ?>

and in your JS just toggle the visibility of your elements. The rest of your JS code should be about right.

For example

function edit_row(id) {
  var showThese = ['price-', 'save_button'].map(prefix => '#' + prefix + id).join(',')
  var hideThese = ['price_val', 'edit_button'].map(prefix => '#' + prefix + id).join(',')
  $(showThese).show()
  $(hideThese).hide()
}

and in your success callback

$('#price_val-' + id).text(price)
var hideThese = ['price-', 'save_button'].map(prefix => '#' + prefix + id).join(',')
var showThese = ['price_val', 'edit_button'].map(prefix => '#' + prefix + id).join(',')
$(showThese).show()
$(hideThese).hide()

Note I've used PHP's alternative syntax. Using echo to create a bunch of mostly static HTML usually leads to problems.