Ajax success reload div content not working

Question

There are many questions on this, but no answer seems to work easily.

I have a <form> with delete icons on each line. Now .on('click',functoin().. I have an ajax request, for example:

 $.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 do not want to use window.location.reload(true); because I just want to update this container where the row was deleted. As you do not see, I tried with .load() reload only <div/> , but no chance. alert(data) empty because I am not returning anything from update_rows.php , but why should I return there to update <div/> ?

Thanks for the tips!

Answer 1

OOOHHHHHH I wrote .load() in the wrong place where 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, $ (this) .remove () would also be a good solution

Answer 2

 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. 

Answer 3

You can return the identifier from your PHP code, which is your delete_id in Js. By the link you can use:

$("#your_delete_id").remove();

Answer 4

 $(this).remove(); 

after ajax load line.

Answer 5

Use both .remove () and .html () parameters, depending on whether you want to delete the string or replace its contents.

Please note that your php should check for failure on deleting / updating db and return certain data for this, which you can check:

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

Answer 6

jquery.fn.remove () is working fine. but more complex work, use the javascript table load function.

Answer 7

In update_rows.php, you just wrote a request but did nothing.

$ run = $ db-> query ($ SQL); if ($ run) {echo success; } Still {echo failed; }

Then in your javascript ajax function, use id to remove the line from the div. If you are warning (data), you should see success or failure.

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