In each row, i want to add a editable td to insert "mavandon" into DATABASE dsdonhang. I read this on http://phppot.com/php/php-mysql-inline-editing-using-jquery-ajax/ but it doesn't work :((
<script src="../lib/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function(){
function saveToDatabase(editableObj,column,idd) {
$.ajax({
url: "saveedit.php",
type: "POST",
data:'column='+$(this).column+'&editval='+$(this).editableObj.innerHTML+'&idd='+$(this).idd,
success: function(data){
$(editableObj).css("background","#FDFDFD");
//alert ("hello");
}
error: function() {}
});
}
});
</script>
<?php $query = mysqli_query($conn,"SELECT * FROM dsdonhang");
while($row=mysqli_fetch_assoc($query)) {$data[] = $row;}
foreach($data as $k=>$v) {
?>
<tr>
<td><?php $madon = $data[$k]["idd"];echo $k+1; ?></td>
<td><?php echo $data[$k]["ngaydat"]; ?></td>
<td><?php echo $data[$k]["hoten"]; ?></td>
<td><?php echo $data[$k]["diachi"]; ?></td>
<td><?php echo $data[$k]["sdt1"]; ?></td>
<td><?php echo $data[$k]["donhang"]; ?></td>
<td><?php echo $data[$k]["tongtien"]; ?>.000VNĐ</td>
<td><?php echo $data[$k]["nguoinhan"]; ?></td>
<td contenteditable="true" onchange="saveToDatabase(this,'mavandon','<?php echo $madon; ?>')"><?php echo $data[$k]["mavandon"]; ?></td>
<td><a href="donhang.php?id=<?php echo $data[$k]["idd"]; ?>&tc=<?php echo $data[$k]["sothamchieu"]; ?>">Xem</a></td>
</tr>
<?php
}
?>
saveedit.php
<?php
require_once("../lib/connection.php");
mysqli_query($conn,"UPDATE dsdonhang set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE idd='".$_POST["idd"]."'");
?>
Any help? Thanks
use onblur
instead of onchange
<td contenteditable="true" onblur="saveToDatabase(this,'mavandon','<?php echo $madon; ?>')" onClick="showEdit(this);"><?php echo $data[$k]["mavandon"]; ?></td>
Typo / incorrect while passing params in the ajax call. Modify it as mentioned below
add this in ajax call. '&idd='+idd Instead of this '&idd='+$(this).idd
Try this:
<script>
$(document).ready(function(){
function saveToDatabase(editableObj,column,idd) {
var data = {'column':$(this).column,'editval':$(editableObj).text(),'idd':$(this).idd };
$.ajax({
url: "saveedit.php",
type: "POST",
contentType: "application/json; charset=utf-8",
datatType: "json",
data:JSON.stringify(data),
success: function(data){
$(editableObj).css("background","#FDFDFD");
console.log("received data=>"+data);
alert ("hello");
}
error: function(err) {
console.log("error=>"+err); //print error if exist
}
});
}
});
</script>
Make sure that ur event is getting called.(u can check in firebug also.) Pass parameters as
{column: $(this).column,editval:$(this).editableObj.innerHTML,idd:$(this).idd}