Question

我有一个按钮点击触发的Ajax功能，如下所示：

$.ajax({
            type: "POST",
            dataType: 'json',
            url: "DBDeleteList.php",
            data: {listID: listID},
            success: refreshMenus($(this))
});

PHP文件成功执行，数据库已更新。

调用refreshMenus（）并调用.load（）来重新刷新菜单以反映更新的数据库，但是加载函数似乎很快就会加载内容（在注册数据库更新之前）。

基本上发生的是，如果我通过Jquery .load从页面加载内容时它不会刷新。如果我手动刷新页面（例如f5），数据库会更新并正确显示菜单。

这是refreshMenus（）：

 function refreshMenus( list ) {
    list.parents('li').remove();
    $('#sortableLoader').load(window.location.href + ' #sortableMenu');
 }

Div ID sortableMenu正在更新，我想它只是过早更新。

Answer 1

在完成ajax之前立即调用refreshMenus($(this));并将$(this)保留在ajax函数之外的变量中。所以试试这个

var el = $(this);
$.ajax({
    type: "POST",
    dataType: 'json',
    url: "DBDeleteList.php",
    data: { listID: listID }
    success: function(){ 
        refreshMenus(el);
    }
});

Answer 2

我认为你应该使用

success:function(){ refreshMenus($(this)); }

如果我是正确的，那么实际发生的是$ .ajax将refreshMenus($(this))的结果作为其回调函数（如果你看一下控制台，它甚至可能会抛出错误）。这意味着在AJAX开始之前refreshMenus($(this))实际上被称为。此外，你要么使用jQuery的context，要么像其他一些提到的答案那样做，并改变$(this)。

Answer 3

使用完整的处理程序（总是）而不是成功（完成），并在必要时添加超时，但它不应该是在调用回调时应该完成服务器端：

var elem = $(this);
$.ajax({
       type: "POST",
       dataType: 'json',
       url: "DBDeleteList.php",
       data: { listID: listID }    
  }).always(function() {
       setTimeout(function() {
          refreshMenus(elem); //`this` will be out of scope
       }, 300); //or whatever you need    
});

Answer 4

尝试将refreshMenus($(this))更改为refreshMenus($('#listid'))（使用您要刷新的列表的正确访问器，当然:)

您遇到的问题是，您传递给$(this)的{{1}}元素不是您要更新的列表元素（或触发按钮，就此而言），它是xhr（ajax）对象，因此refreshMenus方法没有获取它需要更新的元素。

同样，Cabloo说的是好建议 -

refreshMenus

JQuery Ajax .load可以快速加载内容

4 个答案: