ajax成功重新加载div内容不起作用

时间:2014-01-28 10:43:44

标签: javascript php jquery html ajax

关于此问题有很多问题,但似乎没有任何答案可以轻松解决。

我有<form>每行都有删除图标。现在.on('click',functoin()..我有一个像这样的ajax请求:

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

    }
});

这有效,update_rows.php看起来像这样:

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

现在我不想使用window.location.reload(true);因为我只想更新已删除行的容器。正如你所看到的那样,我尝试使用.load()仅重新加载<div/>,但没有机会。 alert(data)为空,因为我没有从update_rows.php返回任何内容,但应该返回那里刷新<div/>

感谢您的建议!

7 个答案:

答案 0 :(得分:4)

OOOHHHHHH我已将.load()写在错误的地方,现在它有效:

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

    }
});

感谢您的帮助,$(this).remove()也是一个很好的解决方案

答案 1 :(得分: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.

答案 2 :(得分:1)

您可以从PHP代码中返回id,这是您在Js中的delete_id。通过引用您可以使用:

  

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

答案 3 :(得分:1)

$(this).remove();

在ajax加载线之后。

答案 4 :(得分:1)

同时使用.remove()和.html(),具体取决于您是要删除行还是替换其内容。

请注意,您的php应检查db delete / update上的失败并返回特定数据,然后您可以检查:

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

答案 5 :(得分:0)

jquery.fn.remove()工作正常。 但是更复杂的工作,使用javascript加载表函数。

答案 6 :(得分:0)

在update_rows.php中,您刚刚编写了查询但没有做任何事情。

$运行= $ DB-&GT;查询(SQL $);    如果($运行){      回声成功;    }其他{      回声失败;    }

然后在你的javascript ajax函数中使用id从div中删除行。如果您提醒(数据),您应该看到成功或失败。

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

}
});