如何在使用MVC部分视图的任何成功的Ajax请求之后调用jQuery函数

时间:2011-08-11 18:21:23

标签: jquery ajax

我有jQuery代码在渲染视图时运行正常。但是,我希望在Ajax请求成功后运行相同的代码。 jQuery最初是在文档准备好时执行的,但是我将它移动到它自己的函数中,因此可以调用它。该函数为一些标签元素添加了一些简单的类。以下是我到目前为止的情况:

$(function () {
    afterLoad();
});

$.ajaxSetup({
    success: function () {
        afterLoad();
    }
});

function afterLoad() {
    // code to execute
}

在发出简单的Ajax请求后,这无法正常执行:

$('#ajaxTest').load('<MVC Route>')

部分视图返回正常,但afterLoad()尝试在局部视图位于DOM之前运行。如果我再次执行相同的调用afterLoad()确实运行(在前一个局部视图上),但它会被新的局部视图覆盖。

有什么想法?另一种方法是没问题的,我正在寻找一个是在部署视图的Ajax请求之后运行站点级.js文件。母版页加载了site.js文件,我想在不重新加载文件的情况下执行它的代码(因为它已经被浏览器加载)。另外,我不想强​​迫开发人员对他们的Ajax调用执行任何不同的操作,因此需要使用简单的.load()等。

7 个答案:

答案 0 :(得分:16)

这就是我用来做你想做的事情:

如果需要访问XHR对象,也可以访问它。

//Global Ajax Complete
$("body").bind("ajaxSend", function(e, xhr, settings){
    //Sent
}).bind("ajaxComplete", function(e, xhr, settings){
    //Complete
}).bind("ajaxError", function(e, xhr, settings, thrownError){
    //Error
});

编辑: 这是我的结构,一直在为我工作。

<强> site.js

function afterLoad() {
    // code to execute
}
$(document).ready(function(){
    $("body").bind("ajaxComplete", function(e, xhr, settings){
           afterLoad();
    });
});

快速创建fiddle。这是你的意思吗?

编辑二:

您可能希望在DOM上有一个侦听器,用于显示的任何<form>元素,然后运行您的afterLoad()函数。这可能是一次性能损失,所以我会小心翼翼地使用它。

我使用livequery来执行此操作

$('form').livequery(function(){
    afterLoad();
});

答案 1 :(得分:4)

您可以在jQuery中设置全局AJAX默认值

像这样

$.ajaxComplete(function(){
       afterLoad();
    });

所以你的方法将在ajaxCompleted

时执行

答案 2 :(得分:1)

这对我来说很好用:

$( document ).ajaxComplete(function( event,request, settings ) {
  //your code here to run when ajax is complete
  alert("Complete");
});

答案 3 :(得分:0)

如果我正确地阅读您的问题,问题是您在ajax调用之后但在将部分视图元素添加到DOM之前尝试发出'afterLoad'。在这种情况下,我认为你需要将afterLoad作为ajax加载方法的一部分来调用:

$('#ajaxTest').load('<MVC Route>', null, 
    function (responseText, textStatus, XMLHttpRequest) 
    { 
        afterLoad(); 
    });

如果我离开基地,请告诉我,快乐的编码!

答案 4 :(得分:0)

删除ajaxSetup部分。

$.ajaxSetup({
/*  success: function () {
     afterLoad();
  }*/
});

然后像这样使用load

$('#ajaxTest').load('<MVC Route>', function(){
       afterLoad();
    });

根据docs,这应该有用。

答案 5 :(得分:0)

罪魁祸首就是这个

$.ajaxSetup({
  success: function () {
     afterLoad();
  }
});

load在内部使用$.get来获取数据,并且在调用成功处理程序afterLoad时,在将数据设置为元素之前调用该方法。您可能不得不采用其他方法,但这不起作用。

试试这个

    $.ajaxSetup({
      complete: function () {
         afterLoad();
      }
    });

答案 6 :(得分:0)

以上答案对我没有用。我浪费了很多时间去弄明白,一切都是徒劳的。最后,我得到了一个解决方案,虽然有点不寻常的方式。这里是。基本上我在从AJAX附加DOM元素后重新分配事件处理程序

function autoLoad(){
//write event handlers which you are again going to assign to the ajax appended     dom elements
}

$(document).ready(function(){
autoLoad;
//more event handlers if present (non dynamic DOM elements)
//Any other Jquery stuff
});

$.ajax({    
//send request here
}).done(function(html) {
//unbind the event handlers assigned in autoload function
append ajax results here
autoLoad();
}).fail(function(ts) {
});