最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ajax success reload div content not working - Stack Overflow

programmeradmin6浏览0评论

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!

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!

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 from update_rows.php and stick that into the relevant container, bypassing that second AJAX request entirely. – Anthony Grist Commented Jan 28, 2014 at 11:04
Add a ment  | 

7 Answers 7

Reset to default 6

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

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

}
});
发布评论

评论列表(0)

  1. 暂无评论