There are many questions on this but no answer seems to be easy working.
I have a <form>
with delete icons on every row. Now .on('click',functoin()..
I have an ajax request like this:
$.ajax({
type:"POST",
url:"/update_rows.php",
data:"delete_id="+$(this).attr("row"),
success:function(data) {
if(data) {
//window.location.reload(true);
//alert(data);
$(".refresh-after-ajax").load("/cms/modules/mod11/inc/modinclude_admin.php .refresh-after-ajax");
} else {
//window.location.reload(true);
}
}
});
This works and update_rows.php
looks like this:
<?php
require_once($_SERVER["DOCUMENT_ROOT"].'/cms/inc/config.inc.php');
global $navid,$DB_PRE,$lang_cms;
$db=new DB();
$sql='Delete FROM '.$DB_PRE.'_mod_ref_pricing WHERE id='.intval($_POST['delete_id']);
$db->query($sql);
?>
Now I don't want to use window.location.reload(true);
cause I just want to update that container where a row has been deleted. As you cann see I tried with .load()
to only reload that <div/>
but no chance. alert(data)
is empty because I'm not returning anything from update_rows.php
but what should I return there to refresh the <div/>
?
Thanks for advices!
There are many questions on this but no answer seems to be easy working.
I have a <form>
with delete icons on every row. Now .on('click',functoin()..
I have an ajax request like this:
$.ajax({
type:"POST",
url:"/update_rows.php",
data:"delete_id="+$(this).attr("row"),
success:function(data) {
if(data) {
//window.location.reload(true);
//alert(data);
$(".refresh-after-ajax").load("/cms/modules/mod11/inc/modinclude_admin.php .refresh-after-ajax");
} else {
//window.location.reload(true);
}
}
});
This works and update_rows.php
looks like this:
<?php
require_once($_SERVER["DOCUMENT_ROOT"].'/cms/inc/config.inc.php');
global $navid,$DB_PRE,$lang_cms;
$db=new DB();
$sql='Delete FROM '.$DB_PRE.'_mod_ref_pricing WHERE id='.intval($_POST['delete_id']);
$db->query($sql);
?>
Now I don't want to use window.location.reload(true);
cause I just want to update that container where a row has been deleted. As you cann see I tried with .load()
to only reload that <div/>
but no chance. alert(data)
is empty because I'm not returning anything from update_rows.php
but what should I return there to refresh the <div/>
?
Thanks for advices!
Share Improve this question edited Jan 28, 2014 at 10:48 caramba asked Jan 28, 2014 at 10:43 carambacaramba 22.5k20 gold badges93 silver badges133 bronze badges 1-
You shouldn't need to return anything. The
.load()
call performs an entirely separate AJAX request that should retrieve the new contents for the.refresh-after-ajax
element. If you have more than one element with that class then you'll need to find a way to target the specific one you want to update. Alternatively, just return the new content fromupdate_rows.php
and stick that into the relevant container, bypassing that second AJAX request entirely. – Anthony Grist Commented Jan 28, 2014 at 11:04
7 Answers
Reset to default 6OOOHHHHHH I've written the .load()
at the wrong place now it works:
$.ajax({
type:"POST",
url:"/update_rows.php",
data:"delete_id="+$(this).attr("row"),
success:function(data) {
if(data) {
} else {
$(".refresh-after-ajax").load(window.location + " .refresh-after-ajax");
}
}
});
Thanks for the help, the $(this).remove() would also have been a nice solution
you have 2 options to update the container
1) on successfully deletion remove the deleted element using jquery .remove() method
or
2) update(innerHtml)) for whole container by return the data same as same format use on page load.
You can return the id from your PHP code, which is your delete_id in Js. By referencing that you can use :
$("#your_delete_id").remove();
$(this).remove();
after the ajax load line.
Use both .remove() and .html() depending on if you wish to remove the row or replace its contents.
Note that your php should check for a fail on the db delete/update and return specific data for this which you can then check for:
$(".click-icon").on('click', function() {
$.ajax({
type:"POST",
url:"/update_rows.php",
data:"delete_id="+$(this).attr("row"),
success:function(data) {
if(data=="failed") {
//show error
} else if(data=="delete") {
$(this).closest('tr').remove(); // remove row
} else if(data) {
$(this).closest('tr').html('<td>'+data+'</td>'); // replace row with new cell
}
}
});
});
jquery.fn.remove()works fine. but more plicated works, use javascript load table function.
In update_rows.php you just wrote the query but did nothing.
$run=$db->query($sql); if($run){ echo success; }else{ echo failed; }
Then in your javascript ajax function use the id to delete the row from div. If you alert(data) you should see success or failed.
var delete_id=$(this).attr("row");
$.ajax({
type:"POST",
url:"/update_rows.php",
data:delete_id,
success:function(data) {
if(data=='success') {
//window.location.reload(true);
//alert(data);
$("#"+delete_id).remove();
} else {
//window.location.reload(true);
}
}
});