I have a problem, that I have several pages in my project and I used a lot of ajax requests in my project, but now I think that whenever an ajax request is called a function will called and whenever that request ends another function will call. How can I do this globally I know I can put this in every ajax request but I need a solution which I do in one place and it works all over the project.

$(document).read(function(){
 // Suppose this document load function is written on layout page and every page is  inherited from this page
});

I have a problem, that I have several pages in my project and I used a lot of ajax requests in my project, but now I think that whenever an ajax request is called a function will called and whenever that request ends another function will call. How can I do this globally I know I can put this in every ajax request but I need a solution which I do in one place and it works all over the project.

$(document).read(function(){
 // Suppose this document load function is written on layout page and every page is  inherited from this page
});

• javascript
• html
• ajax
• jquery

Share Improve this question Follow edited Nov 29, 2013 at 10:41 BenMorel 36.7k5252 gold badges205205 silver badges337337 bronze badges asked May 9, 2012 at 8:00 AhsanAhsan 27111 gold badge88 silver badges1616 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

Use ajaxSetup, for example

$.ajaxSetup({
    beforeSend: function() {
        console.log('test');
    },
    plete: function() {
        console.log('pleted');
    }
});

will setup beforeSend handler for every ajax request. Note that ajaxSetup can take any option that $.ajax can.

You should create a wrapper function for your ajax, then use that function. that way, you have "central" control over the ajax call. something like:

//fast and crude way to extend jQuery
$.fn.customAjax = function(params){

    //contains defaults and predefined functions
    var defaults = {
        plete : function(){...default plete hander...},
        beforeSend : function (){...default beforeSend handler}
        ...
    }

    //merge settings
    var finalParams = $.extend({},defaults,params);

    //call ajax and return the deferred
    return $.ajax(finalParams);
}

//use it like
$.customAjax({
   url : ...,
   method : ...,
   data: ...,
   plete : function(){...} //redefining in the call will override the defaults
});

.ajaxStart

Register a handler to be called when the first Ajax request begins.

.ajaxSucess

Attach a function to be executed whenever an Ajax request pletes successfully.

for Detail doc: http://api.jquery./category/ajax/

Try something like this:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() { 
   $.ajax({
     url: "anotherMethod.html",
     context: document.body
   });
});
});

That means whenever ajax call pleted successfully call your desire call.

It doesn't have a bug when plete. Click on Like, if work for you

$(document).ajaxSend(function(event, jqXHR, settings) {
    $('#general-ajax-load ').fadeIn();
});

$(document).ajaxComplete(function(event, jqXHR, settings) {
    $('#general-ajax-load ').fadeOut();
});