CODEWITHSUNDEEP
jqueryajax
oscilatingcretin
oscilatingcretin

Reputation: 10919

jQuery ajaxComplete: Is there a way to tell which Javascript function executed the ajax call?

I have the .ajaxComplete event wired up to a few elements like this:

$("#ElementId").ajaxComplete(function (a, b, c) { });

The issue is that I have multiple $.ajax calls in my script that are called by various functions. I don't want the .ajaxComplete event to fire for every control for every ajax call. Conceptually, I am looking for something like this:

if (a.function == SearchCustomers) { do this }

Is there any way to achieve what I want here?

Edit: I realize that I can check for the URL of the service I am calling, but I don't want to hardcode a URL string in my scripts more than once.

Upvotes: 1

Views: 8926

Answers (4)

techfoobar
techfoobar

Reputation: 66663

Update

Check this demo: http://jsfiddle.net/Z6Z5e/4/

You can specify a function identifier in a custom property in your .ajax() call and use the value of that in your ajaxComplete() callback.

For example, add a 'func' property while making your .ajax() call:

function foo() {
    $.ajax({
        url: '/someurl',
        ...
        func: 'foo',
        ...
    });
}

And then, use the value of that from your ajaxComplete()

$('#someElement').ajaxComplete(function(e, xhr, settings) {
    if (settings.func == 'foo') {
        // ... 
    }
    else if (settings.func == 'bar') {
        // ...
    }
});

Upvotes: 8

Matt Burland
Matt Burland

Reputation: 45135

Ajax call one:

$.ajax({
    // set all your properties as needed
    url: myUrl,
    success: function(data) {
        // handle the result from THIS .ajax call
    }
});

Ajax call two:

$.ajax({
    // set all your properties as needed
    url: myotherURL,
    success: function(data) {
        // handle the result from THIS .ajax call
    }
});

If you have a lot of .ajax calls that need to do the same thing, then you can use $.ajaxSetup to set a default success function

Upvotes: 1

user659025
user659025

Reputation:

Personally I like to have my modules organized in JS objects and than abstract my Ajax calls into functions for various reasons:

​var YourModule = {
    Ajax: {        
        AjaxCallOne: function()
        {
            return $.ajax({
                // your options for the call    
            }).promise();
        },
        AjaxCallTwo: function()
        {
            return $.ajax({
                // your options for the call    
            }).promise();
        }
    },
    Events: {
        OnButtonOneClick: function()
        {
            YourModule.Ajax.AjaxCallOne().then(YourModule.Events.OnAjaxCallOneReceived);
        },
        OnButtonOneClick: function()
        {
            YourModule.Ajax.AjaxCallTwo().then(YourModule.Events.OnAjaxCallTwoReceived);
        },
        OnAjaxCallOneReceived:function(data)
        {
            // your code            
        },
        OnAjaxCallTwoReceived: function(data)
        {
            // your code    
        }
    }            
};​​​

.then() is working since $.ajax implements the Deferred "interface". See this reference: http://api.jquery.com/category/deferred-object/

Also, think about giving the code user the ability to alter the options passed into the $.ajax calls. For this, I use $.extend. See this reference: http://api.jquery.com/jQuery.extend/

Upvotes: 2

JimMorrison723
JimMorrison723

Reputation: 113

You have to do it this way:

$.ajax({
    url: "servicecall.html",
    success: function(html){
        //if success
    };
});

Upvotes: 3

Related Questions