ajax success reload div content not working

Question

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.phpbut what should I return there to refresh the <div/>?

Thanks for advices!

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 from `update_rows.php` and stick that into the relevant container, bypassing that second AJAX request entirely. — Anthony Grist, Jan 28 '14 at 11:04

caramba · Accepted Answer · 2017-08-03T06:51:23.357

OOOHHHHHH 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

score 1 · Answer 2 · answered Jan 28 '14 at 10:52

1

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.

answered Jan 28 '14 at 10:52

NLSaini

257
1
10

score 1 · Answer 3 · answered Jan 28 '14 at 10:55

1

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

answered Jan 28 '14 at 10:55

Makrand

587
5
14

score 1 · Answer 4 · answered Jan 28 '14 at 11:00

1

$(this).remove();

after the ajax load line.

answered Jan 28 '14 at 11:00

S..

5,511
2
36
43

Tims · Answer 5 · 2014-01-28T12:58:39.203

1

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

edited Jan 28 '14 at 12:58

answered Jan 28 '14 at 11:01

Tims

1,987
14
16

I've tried to return 'delete'; in update_rows.php but alert(data); after sucess:function(data){ is always empty. what should I change? – caramba Jan 28 '14 at 11:27
Use GET instead of POST – Tims Jan 28 '14 at 11:41
please redo your edit. it wan't delete any items with GET http://stackoverflow.com/questions/715335/get-vs-post-in-ajax – caramba Jan 28 '14 at 12:09
my data in success:function(data) {} is always empty. would be very nice to check if(data="failed") like your example, but that doesn't works for me. do I have to return something, or why can it always be empty? – caramba Jan 28 '14 at 14:31

score 0 · Answer 6 · answered Jan 28 '14 at 11:00

0

jquery.fn.remove()works fine. but more complicated works, use javascript load table function.

answered Jan 28 '14 at 11:00

soredive

795
1
9
25

score 0 · Answer 7 · answered Jan 28 '14 at 11:05

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

}
});

ajax success reload div content not working

7 Answers7

Linked