Passing additional parameters to $.ajax complete callback function

Question

I'm writing a jQuery plugin where I need to use an $.ajax request and to handle the callback with additional parameter but I find it very difficult to implement it.

a semplified version:

$('#element_id').click (function () {
    var additional_params = { name:'mike', surname:'buongiorno' };
    var ajax_params = {
        type: "POST",
        url: "some.php",
        data:'data here',
        complete:getResponse
    }
    sendAJAX (ajax_params, additional_params);
});
var sendAJAX = function (ajax_params, additional_params) {
    $.ajax(ajax_params, additional_params);
}

var getResponse = function (data, additional_params) {

}

Does exist some way to do something like this to pass additional_params to complete callback function (in this case getResponse)?

James Montagne · Accepted Answer · 2011-06-23 00:29:46Z

16

function callback(stuff){
   // use stuff
}

...

   var something="something";

   $.ajax({
      url: "test.html",
      complete: function(){
         callback(something);
      }
   });

...

And in case you need one of the parameters that already get passed you can change it to this:

complete: function(jqXHR, textStatus){
      callback(jqXHR, textStatus, something);
}

answered Jun 23, 2011 at 0:29

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Royi Namir Over a year ago

+1 this is the simplest solution. (especially the second code part where everybody just need data... and forget about jqXHR ). so why do i see the closure solutions ?

aroth · Accepted Answer · 2011-06-23 00:26:16Z

You can do something like:

$('#element_id').click (function () {
    var additional_params = { name:'mike', surname:'buongiorno' };
    var ajax_params = {
        type: "POST",
        url: "some.php",
        data:'data here',
        complete:getResponse(additional_params)
    }
    sendAJAX (ajax_params, additional_params);
});


var getResponse = function(additional_params) {
    return function(data) {
        //code that uses 'additional_params' (and 'data') can go here
        alert(additional_params.name);
    };
};

Basically getResponse has been modified so that it returns a function closure that includes whatever additional_params you passed in. The parameters will be available to the handler function when jQuery invokes it.

user2080225 · Accepted Answer · 2015-06-13 17:29:15Z

Here's the pasttern of code I use to post JSON data, and then process the response using a callback method that allows me to setup some data in 'info' that will be available asynchronously, and passed into the callback method as the second parameter to the callback method. This way your callback methods can have some 'context' passed into them (via 'info'), and it wraps all the 'boilerplate' in this method called 'json'. The key line is of course the place where it calls the callback method. Thanks to the post by James Montagne, which helped me come up with this design.

    json : function(postName, postData, callback, info) {
        if (typeof callback !== "function") {
            console.log("callback not valid function for postName "
                    + postName);
        }

        // console.log("JSON-POST: " + JSON.stringify(postData));
        $.ajax({
            url : postTargetUrl + postName,
            contentType : "application/json",
            type : "post",
            dataType : "json",
            cache : false,
            data : JSON.stringify(postData),
            success : function(jqXHR, textStatus) {
                // console.log("JSON-RESULT: "+postName+" -> " +
                // textStatus);
                if (textStatus === "success") {
                    callback(jqXHR, info);
                } else {
                    console.log("JSON: " + postName + " -> " + textStatus);
                }
            }
        });
    }

Collectives™ on Stack Overflow

Passing additional parameters to $.ajax complete callback function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related