Recently making the switch from Prototype to jQuery, I am struggling with some basic issues.

I use several AJAX-requests in my application; for 95% of these requests, I'd like to have some global events executed, such as showing or hiding a loading indicator. Apart from the global functionality, every request should also have some custom code executed after it has pleted.

It seems like the local Ajax events override the global ones, once they are set. For example, see the following code:

// global events
$('#loader').bind('ajaxStart', function() { 
    // in this particular example, the ajaxStart() works fine, 
    // as it has not been overridden
    Loader.enable();
}).bind('ajaxComplete', function() { 
    // this section will not execute. when the local plete()
    // is removed, it will execute just fine
    Loader.disable();
} );

// local ajax event
$.ajax({
    type: $(element).attr('method'),
    url: $(element).attr('action'),
    data: $(element).serialize(),
    global: 'true',
    plete: function(data) {
        if (params.target && $('#' + params.target)) {
            $('#' + params.target).html(data.responseText);
        }
        Behaviour.apply();
});

In this particular case, the local plete() event seems to stop the global ajaxComplete() event from executing.

Is there any way to execute both the local as the global ajax events?

Recently making the switch from Prototype to jQuery, I am struggling with some basic issues.

I use several AJAX-requests in my application; for 95% of these requests, I'd like to have some global events executed, such as showing or hiding a loading indicator. Apart from the global functionality, every request should also have some custom code executed after it has pleted.

It seems like the local Ajax events override the global ones, once they are set. For example, see the following code:

// global events
$('#loader').bind('ajaxStart', function() { 
    // in this particular example, the ajaxStart() works fine, 
    // as it has not been overridden
    Loader.enable();
}).bind('ajaxComplete', function() { 
    // this section will not execute. when the local plete()
    // is removed, it will execute just fine
    Loader.disable();
} );

// local ajax event
$.ajax({
    type: $(element).attr('method'),
    url: $(element).attr('action'),
    data: $(element).serialize(),
    global: 'true',
    plete: function(data) {
        if (params.target && $('#' + params.target)) {
            $('#' + params.target).html(data.responseText);
        }
        Behaviour.apply();
});

In this particular case, the local plete() event seems to stop the global ajaxComplete() event from executing.

Is there any way to execute both the local as the global ajax events?

• javascript
• jquery
• ajax
• jquery-events

Share Improve this question Follow edited May 23, 2022 at 11:31 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 3, 2009 at 10:09 Aron RotteveelAron Rotteveel 83.2k1717 gold badges105105 silver badges129129 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Just tried to run your code. Added the missing }); though. Worked like a charm. Calls were made in this order:

1. ajaxStart
2. plete
3. ajaxComplete

Here is what I did:

// local ajax event
$.ajax({
    ...
    global: 'true',
    plete: function(data) {
        ...
    }
}); // <=== This line here

I haven't tried it, but why aren't you creating a global method:

function globalAjaxComplete(data)

and call it from both the global and local event handler?

You could also define a class "ajaxEnabled" and do this:

$(".ajaxEnabled").bind("ajaxStart", 
   Function() { globalAjaxComplete(); });

Then you wouldn't need to call the global method every time.

Still don't know however why the local binding cancels the global one.

First of all, thank you for the replies. Both of them at least helped me to re-evaluate my code time and time again.

The problem and solution turned out to be quite simple:

The Behaviour.apply(); that was called in my local plete event triggered an error elsewhere, preventing the plete() function to finish correctly and effectively disabling the global ajaxComplete() event. Fixing this error also fixed my problem.

This means that jQuery supports bining both local as global ajax events.