Is there a way to pass more data into a callback function in jQuery?
I have two functions and I want the callback to the $.post, for example, to pass in both the resulting data of the AJAX call, as well as a few custom arguments
function clicked() {
var myDiv = $("#my-div");
// ERROR: Says data not defined
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
// ERROR: Would pass in myDiv as curData (wrong)
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
}
function doSomething(curData, curDiv) {
}
I want to be able to pass in my own parameters to a callback, as well as the result returned from the AJAX call.
The solution is the binding of variables through closure.
As a more basic example, here is an example function that receives and calls a callback function, as well as an example callback function:
function callbackReceiver(callback) {
callback("Hello World");
}
function callback(value1, value2) {
console.log(value1, value2);
}
This calls the callback and supplies a single argument. Now you want to supply an additional argument, so you wrap the callback in closure.
callbackReceiver(callback); // "Hello World", undefined
callbackReceiver(function(value) {
callback(value, "Foo Bar"); // "Hello World", "Foo Bar"
});
Or, more simply using ES6 Arrow Functions:
callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"
As for your specific example, I haven't used the .post function in jQuery, but a quick scan of the documentation suggests the call back should be a function pointer with the following signature:
function callBack(data, textStatus, jqXHR) {};
Therefore I think the solution is as follows:
var doSomething = function(extraStuff) {
return function(data, textStatus, jqXHR) {
// do something with extraStuff
};
};
var clicked = function() {
var extraStuff = {
myParam1: 'foo',
myParam2: 'bar'
}; // an object / whatever extra params you wish to pass.
$.post("someurl.php", someData, doSomething(extraStuff), "json");
};
What is happening?
In the last line, doSomething(extraStuff) is invoked and the result of that invocation is a function pointer.
Because extraStuff is passed as an argument to doSomething it is within scope of the doSomething function.
When extraStuff is referenced in the returned anonymous inner function of doSomething it is bound by closure to the outer function's extraStuff argument. This is true even after doSomething has returned.
I haven't tested the above, but I've written very similar code in the last 24 hours and it works as I've described.
You can of course pass multiple variables instead of a single 'extraStuff' object depending on your personal preference/coding standards.
When using doSomething(data, myDiv), you actually call the function and do not make a reference to it.
You can either pass the doStomething function directly but you must ensure it has the correct signature.
If you want to keep doSomething the way it is, you can wrap its call in an anonymous function.
function clicked() {
var myDiv = $("#my-div");
$.post("someurl.php",someData, function(data){
doSomething(data, myDiv)
},"json");
}
function doSomething(curData, curDiv) {
...
}
Inside the anonymous function code, you can use the variables defined in the enclosing scope. This is the way Javascript scoping works.
It's actually easier than everyone's making it sound... especially if you use the $.ajax({}) base syntax vs. one of the helper functions.
Just pass in the key: value pair like you would on any object, when you setup your ajax request... (because $(this) hasn't changed context yet, it's still the trigger for the bind call above)
<script type="text/javascript">
$(".qty input").bind("keypress change", function() {
$.ajax({
url: "/order_items/change/"+$(this).attr("data-order-item-id")+"/qty:"+$(this).val()+"/returnas.json",
type: "POST",
dataType: "json",
qty_input: $(this),
anything_else_i_want_to_pass_in: "foo",
success: function(json_data, textStatus, jqXHR) {
/* here is the input, which triggered this AJAX request */
console.log(this.qty_input);
/* here is any other parameter you set when initializing the ajax method */
console.log(this.anything_else_i_want_to_pass_in);
}
});
});
</script>
One of the reasons this is better than setting the var, is that the var is global and as such, overwritable... if you have 2 things which can trigger ajax calls, you could in theory trigger them faster than ajax call responds, and you'd have the value for the second call passed into the first. Using this method, above, that wouldn't happen (and it's pretty simple to use too).
In today's world there is a another answer that is cleaner, and taken from another Stack Overflow answer:
function clicked()
{
var myDiv = $( "#my-div" );
$.post( "someurl.php", {"someData": someData}, $.proxy(doSomething, myDiv), "json" );
}
function doSomething( data )
{
// this will be equal to myDiv now. Thanks to jQuery.proxy().
var $myDiv = this;
// doing stuff.
...
}
Here's the original question and answer:
jQuery HOW TO?? pass additional parameters to success callback for $.ajax call?
You can also try something like the following:
function clicked() {
var myDiv = $("#my-div");
$.post("someurl.php",someData,function(data){
doSomething(data, myDiv);
},"json");
}
function doSomething(curData, curDiv) {
}
You can use a closure of JavaScript:
function wrapper( var1, var2,....) // put here your variables
{
return function( data, status)
{
//Handle here results of call
}
};
and when you can do:
$.post("someurl.php",data,wrapper(var1, var2, etc...),"html");
I've made a mistake in the last my post. This is working example for how to pass additional argument in callback function:
function custom_func(p1,p2) {
$.post(AJAX_FILE_PATH,{op:'dosomething',p1:p1},
function(data){
return function(){
alert(data);
alert(p2);
}(data,p2)
}
);
return false;
}
Let's go simple ! :)
$.ajax({
url: myUrl,
context: $this, // $this == Current $element
success: function(data) {
$.proxy(publicMethods.update, this)(data); // this == Current $element
}
});
A more general solution for sending asynchronous requests using the .ajax() jQuery API and closures to pass additional parameters to the callback function:
function sendRequest(method, url, content, callback) {
// additional data for the callback
var request = {
method: method,
url: url
};
$.ajax({
type: method,
url: url,
data: content
}).done(function(data, status, xhr) {
if (callback) callback(xhr.status, data, request);
}).fail(function(xhr, status) {
if (callback) callback(xhr.status, xhr.response, request);
});
};
For me, and other newbies who has just contacted with Javascript,
I think that the Closeure Solution is a little kind of too confusing.
While I found that, you can easilly pass as many parameters as you want to every ajax callback using jquery.
Here are two easier solutions.
First one, which #zeroasterisk has mentioned above, example:
var $items = $('.some_class');
$.each($items, function(key, item){
var url = 'http://request_with_params' + $(item).html();
$.ajax({
selfDom : $(item),
selfData : 'here is my self defined data',
url : url,
dataType : 'json',
success : function(data, code, jqXHR){
// in $.ajax callbacks,
// [this] keyword references to the options you gived to $.ajax
// if you had not specified the context of $.ajax callbacks.
// see http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings context
var $item = this.selfDom;
var selfdata = this.selfData;
$item.html( selfdata );
...
}
});
});
Second one, pass self-defined-datas by adding them into the XHR object
which exists in the whole ajax-request-response life span.
var $items = $('.some_class');
$.each($items, function(key, item){
var url = 'http://request_with_params' + $(item).html();
$.ajax({
url : url,
dataType : 'json',
beforeSend : function(XHR) {
// 为了便于回调，把当前的 jquery对象集存入本次 XHR
XHR.selfDom = $(item);
XHR.selfData = 'here is my self defined data';
},
success : function(data, code, jqXHR){
// jqXHR is a superset of the browser's native XHR object
var $item = jqXHR.selfDom;
var selfdata = jqXHR.selfData;
$item.html( selfdata );
...
}
});
});
As you can see these two solutions has a drawback that : you need write a little more code every time than just write:
$.get/post (url, data, successHandler);
Read more about $.ajax : http://api.jquery.com/jquery.ajax/
If someone still comes here, this is my take:
$('.selector').click(myCallbackFunction.bind({var1: 'hello', var2: 'world'}));
function myCallbackFunction(event) {
var passedArg1 = this.var1,
passedArg2 = this.var2
}
What happens here, after binding to the callback function, it will be available within the function as this.
This idea comes from how React uses the bind functionality.
$(document).on('click','[action=register]',function(){
registerSocket(registerJSON(),registerDone,second($(this)));
});
function registerSocket(dataFn,doneFn,second){
$.ajax({
type:'POST',
url: "http://localhost:8080/store/public/register",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:dataFn
}).done ([doneFn,second])
.fail(function(err){
console.log("AJAX failed: " + JSON.stringify(err, null, 2));
});
}
function registerDone(data){
console.log(JSON.stringify(data));
}
function second(element){
console.log(element);
}
Secondary way :
function socketWithParam(url,dataFn,doneFn,param){
$.ajax({
type:'POST',
url:url,
contentType: "application/json; charset=utf-8",
headers: { 'Authorization': 'Bearer '+localStorage.getItem('jwt')},
data:dataFn
}).done(function(data){
doneFn(data,param);
})
.fail(function(err,status,xhr){
console.log("AJAX failed: " + JSON.stringify(err, null, 2));
});
}
$(document).on('click','[order-btn]',function(){
socketWithParam(url,fakeDataFn(),orderDetailDone,secondParam);
});
function orderDetailDone(data,param){
-- to do something --
}
actually, your code is not working because when you write:
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
you place a function call as the third parameter rather than a function reference.
As an addendum to b01's answer, the second argument of $.proxy is often used to preserve the this reference. Additional arguments passed to $.proxy are partially applied to the function, pre-filling it with data. Note that any arguments $.post passes to the callback will be applied at the end, so doSomething should have those at the end of its argument list:
function clicked() {
var myDiv = $("#my-div");
var callback = $.proxy(doSomething, this, myDiv);
$.post("someurl.php",someData,callback,"json");
}
function doSomething(curDiv, curData) {
//"this" still refers to the same "this" as clicked()
var serverResponse = curData;
}
This approach also allows multiple arguments to be bound to the callback:
function clicked() {
var myDiv = $("#my-div");
var mySpan = $("#my-span");
var isActive = true;
var callback = $.proxy(doSomething, this, myDiv, mySpan, isActive);
$.post("someurl.php",someData,callback,"json");
}
function doSomething(curDiv, curSpan, curIsActive, curData) {
//"this" still refers to the same "this" as clicked()
var serverResponse = curData;
}
Related
I need to make sure that getValue() is called only after execution of SetValueForVariable(). I cannot modify BindValue() or SetValueForVariable().
I tried $.when(BindValue()).then(getValue());. (As i cannot change the already existing flow)
It works some times but sometimes it shows the previously set value.
I need to call getValue on $(document).ready(). How do I make sure getValue() is only called after execution of SetValueForVariable().
//This function is inturn making call to SetValueForVariable() which is written in another file
//Cannot Change this
function BindValue() {
SetValueForVariable()
}
function getValue()
{
$.ajax({
url: getRoutePath("GetPath/GetPath1"),
type: "GET",
async: true,
success: function (data) {
debugger;
data = JSON.parse(data)
$('#txtBox').text(data.Count);
});
}
//Written in another file
//Cannot change this function
function SetValueForVariable() {
//this fucntion is making server call the server method sets value of a Session Variable
$.ajax({
url: getRoutePath("SetPath/SetPath1"),
type: "GET",
async: true,
....
});
}
You could redefine BindValue, calling the original BindValue in your new definition after ensuring that getValue has been called.
Pseudo code
var originalBindValue = BindValue;
BindValue = function() {
if getValue has been called
originalBindValue();
else
call getValue and then originalBindValue() in getValue success / failure callback
}
I think this would work around your cannot modify BindValue limitation - you don't actually need access to BindValue code here.
(function () {
var id="test";
$.ajax({
context: this,
url : "http://weather.yahooapis.com/forecastrss",
success : function(data){
this.id = "was test";
}
});
console.log(id);
})();
The previous question wasn't clear enough so hear is what the question really is. When I'm doing console.log(id) it doesn't show the changed value. What I'd like to get is the changed value of id. How can I achieve this, I've tried all the solutions in the comments and the given answers as well but none has worked for me?
A jsFiddle will be highly appreciated.
In getTodayCats:
var self = this;
And then when need to access ids, you should get it like this:
self.ids
The usage of the self, this pattern is made in this case since you need to access a property of this in an asynchronous callback handler(ajax success). Handlers for asynchronous callbacks are called without the original this object, so this is used to utilize the function's closure to pass in the original.
In case of the jQuery's ajax method, you could also use the context option to pass in the this object which will be used for its callback handlers. It's up to you on whether you use it. I personally prefer not to, since this isn't an option for other async handlers such as in the case of timeout and intervals, and I prefer to keep it consistent.
$.ajax({
url: "http://localhost/woodenspoon/getTodaysCats.php",
contentType: "application/json; charset=utf-8",
dataType: "json",
responseType: "json",
context: this,
success: function (data) {
this.ids = "ok";
}
});
Access "ids" this way-
getTodaysCats: function () {
var args = Array.prototype.slice.call( WinJS.UI.Pages.define.arguments);
var ids = args[1].ids;
$.ajax({
...
, success: function (data) {
var arr = new Array(1,2,3,4,5);
foreach(var num in arr)
ids += "ok";
}
});
return ids;
}
try using something like this...
${variable}
I'm using a $.ajax function that serves two purposes and depending on the context, I want to execute different functions on the call-back.
function MyAjaxCall(SomeParameter, CallBackFunctionName) {
$.ajax({
...
success: function (msg) {
var TheData = msg.hasOwnProperty("d") ? msg['d'] : msg;
// here: "execute the function in parameter CallBackFunctionName
// AND pass it the parameter TheData
}
}
How do I write the line where the name of the function is a parameter and I want to pass it TheData as the parameter.
Note, at the moment, I'm writing it like that:
if (CallBackFunctionName === "SomeFunctionName1") {
SomeFunctionName1(TheData);
} else {
SomeFunctionName2(TheData);
}
If the function is defined as a global function then use :
window[functionName](arguments);
If it isn't then change the way MyAjaxCall is called like so:
MyAjaxCall.apply(thisArg, [SomeParameter, CallBackFunction]); //thisArg is the value of the this object inside MyAjaxCall().
Then inside MyAjaxCall() do this:
function MyAjaxXall(SomeParam, CallBackFunction){
var me = this; //the object supplied through thisArg while calling.
$.ajax({
success : function(msg)
{
//whatever processing you want
me[CallBackFunction](arguments);
}
});
}
Or you could add the object as part of the paramters of MyAjaxCall():
function MyAjaxCall(SomeParam, obj, CallBackFunction)
{
$.ajax({
success : function(msg)
{
//whatever processing you want
obj[CallBackFunction](arguments);
}
});
}
When using it for calling a global function use:
MyAjaxCall(SomeParam, window, CallBackFunction);
Assuming that the defined function which name is passed via the variable CallBackFunctionName is global, you could do this:
window[CallBackFunctionName](TheData)
You could also just pass the actual function to MyAjaxCall like this:
var MyCallbackFunction = function(data){ console.log(data) }
MyAjaxCall({param1: 'value1'}, MyCallbackFunction)
This way you can just execute the function:
function MyAjaxCall(SomeParameter, CallBackFunction) {
$.ajax({
...
success: function (msg) {
var TheData = msg.hasOwnProperty("d") ? msg['d'] : msg;
CallBackFunction(TheData)
}
}
I am calling a web services from client side on .aspx page, and I want to call a function on the success of this service.
The name of function will be passed as a parameter to this function, which will dynamically change.
I am passing it like this:
function funName parm1, parm2, onSucceedCallFuntion
function onSucceedCallFuntion(result)
//doing something here.
Perhaps because it's a string is why the "succeed" function could not be called
function funName(parm1, par2, onSucceedFunName) {
$.ajax({
url: "../WebServices/ServiceName.asmx/ServiceFunName",
data: JSON.stringify({
parm1: parm1,
par2: par2
}), // parameter map type: "POST", // data has to be POSTED
contentType: "application/json",
dataType: "json",
success: onSucceedFunName,
});
function onSucceedFunName() {}
If you're passing the name of the function as a string, you could try this:
window[functionName]();
But that assumes the function is in the global scope. Another, much better way to do it would be to just pass the function itself:
function onSuccess() {
alert('Whoopee!');
}
function doStuff(callback) {
/* do stuff here */
callback();
}
doStuff(onSuccess); /* note there are no quotes; should alert "Whoopee!" */
Edit
If you need to pass variables to the function, you can just pass them in along with the function. Here's what I mean:
// example function
function greet(name) {
alert('Hello, ' + name + '!');
}
// pass in the function first,
// followed by all of the variables to be passed to it
// (0, 1, 2, etc; doesn't matter how many)
function doStuff2() {
var fn = arguments[0],
vars = Array.prototype.slice.call(arguments, 1);
return fn.apply(this, vars);
}
// alerts "Hello, Chris!"
doStuff2(greet, 'Chris');
I have a javascript 'class' which contains a wrapper method to call jquery .ajax(). I want to pass in the onSuccess and onError function handlers, but am not sure how. I can do this with plain old global functions, but I'm trying to improve my javascript (from Java background). Any pointers would be appreciated.
In the _makeAjaxCall() method below, how do I reference the onSuccessHandler
function testApp() {
new X();
}
function X() {
// Init X by making Ajax call, passing the func to be called on ajax return
this._makeAjaxCall(initUrl, this.onSuccessInit, this.onError);
// Make another ajax call to init another component
this._makeAjaxCall(initUrl, this.onSuccessSomeOtherAjaxCall, this.onError);
}
X.prototype.onSuccessInit = function(){
this.doStuff(...);
}
X.prototype.onSuccessSomeOtherAjaxCall = function(){
this.doOtherStuff(...);
}
/**
* make an ajax call, and call the provided success/error handler
*/
X.prototype._makeAjaxCall = function(url, onSuccessHandler, onError){
$.ajax({
url : url,
success : function (jsonData, textStatus, XMLHttpRequest) {
// If I don't user 'this', the func called but I've lost my reference
// to my instance of X
onSuccessHandler();
// If I use 'this', it points to the ajax call object, not to my X object.
this.onSuccessHandler();
}
});
}
The problem is that when the success callback is called by the $.ajax function, the default context is used window. You need to tell JQuery that you want a different context, so you can do one of 3 things:
Add a context attribute to the hash that is sent to $.ajax, so I your case you can do:
$.ajax({
url: url,
context: this, // this will tell JQuery to use the right context
success: this.onSuccessHandler
});
Use JQuery's $.proxy function, like:
$.ajax({
url: url,
success: $.proxy(this.onSuccessHandler, this) // this will bind the correct context to the callback function
});
Cache the variable this, like #mVChr suggested, although I would encourage you to use self as it has become somewhat of a javascript idiom
var self = this;
$.ajax({
url: url,
success: function(data) {
self.onSuccessHandler(data);
}
});
Edit:
If you need a more in depth explanation of context and scope in javascript checkout this article: http://www.digital-web.com/articles/scope_in_javascript/
Cache this within the local scope of _makeAjaxCall before conducting the ajax call:
X.prototype._makeAjaxCall = function(url, onSuccessHandler, onError){
var _X = this; // cache this
$.ajax({
url : url,
success : function (jsonData, textStatus, XMLHttpRequest) {
// use cached this
_X.onSuccessHandler();
}
});
}
Thanks to input from CarlosZ & mVChr, I've figured out the solution, http://jsfiddle.net/bX35E/3/
$(document).ready(function testApp() {
new X();
});
function X() {
console.dir(this);
var initUrl = "/echo/json/";
this._instanceVariable = "I AM defined!";
// Init X by making Ajax call, passing the func to be called on ajax return
this._makeAjaxCall(initUrl, this.onSuccessInit(), this.onError);
// Make another ajax call to init another component
this._makeAjaxCall(initUrl, this.onSuccessSomeOtherAjaxCall(), this.onError);
}
X.prototype.onSuccessInit = function(){
//this.doStuff(...);
var self = this;
return function() {
alert("onSuccessInit, _instanceVariable="+self._instanceVariable);
}
}
X.prototype.onSuccessSomeOtherAjaxCall = function(){
var self = this;
return function() {
alert("onSuccessSomeOtherAjaxCall, _instanceVariable="+self._instanceVariable);
}
}