I would to use a callback function in the same 'class' when the ajax request is successful. Here's the code
$.ajax({
type: 'get',
url: ajax_url,
success: this.callback
})
this.callback = function() {
// ERROR! this doesn't point to the right context!
this.run_some_process();
}
Are there any built-in JavaScript constructs that can allow me to get or save the correct context, without having to resort to a custom delegate function?
If I understand your question correctly.
var that = this;
$.ajax({
type: 'get',
url: ajax_url,
success: that.callback
})
that.callback = function() {
// ERROR! this doesn't point to the right context!
that.run_some_process();
}
Have a look at $.ajax's 'context' option.
Related
Right now I have a code like this:
$.ajax({
url: apiUrl + valueToCheck,
data: {
format: 'json'
},
error: function () {
},
dataType: 'json',
success: function (data) {
checkAgainstDBHelperWH(data, valueToCheck);
},
type: 'GET'
});
If I am not mistaken, checkAgainstDBHelperWH is known as a callback function. The function executes once the servers sends back response for this particular HTTP /ajax request.
I want to try writing something like the one below, but I don't know what are the effects or is it even logical:
var request = $.ajax({
url: apiUrl + valueToCheck,
data: {
format: 'json'
},
error: function () {
},
dataType: 'json',
success: function (data) {
checkAgainstDBHelperWH(data, valueToCheck);
},
type: 'GET'
})
arrayOfPromises.push(request);
$.when.apply(null, arrayOfPromises).done(function () {
//...some javascript here
});
I want to understand if the .done(function () is fired after the callback function checkAgainstDBHelperWH is completed? Or whatever I am trying to write above does not flow consistently with how ajax works?
Thanks!
I tested it, your code only work if the function(in this case, 'checkAgainstDBHelperWH') doesn't call ajax.
If you want to wait finishing the inner ajax process, use then() and return inner ajax.
var ajaxs =
$.get("xxx").then(function() {
return $.get("yyy").done(function() {
});
});
Here is the jsfiddle.
I'm not sure whether this way is general or not.
I'm using an AJAX call with async:false to return data, like this:
var my_data = my_function(10, 20);
function my_function(value1, value2) {
var returnData;
$.ajax({
type: 'POST',
url: 'my_function.php',
data: { variable1: value1, variable2: value2 },
success: function(data) { returnData = data; },
async:false
});
return returnData;
};
Notice that I've set async:false, which is necessary in the context of my code, and works perfectly.
Howverer, at the JQuery API, this message is provided for the entry on async:
As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is
deprecated; you must use the success/error/complete callback options
instead of the corresponding methods of the jqXHR object such as
jqXHR.done() or the deprecated jqXHR.success().
I'm having trouble making sense of that warning as regards my function, as I'm not using $.Deferred in my routine; the warning still may apply in a way I don't appreciate. So, is it safe to leave the code as-is, or should it be rewritten in light of the deprecation of async, and if so, how should it be rewritten? (I need the function performed synchronously.)
Many thanks!
The code you provided looks good. The following is a version that is being deprecated (don't do this):
var my_data = my_function(10, 20);
function my_function(value1, value2) {
var returnData;
$.ajax({
type: 'POST',
url: 'my_function.php',
data: { variable1: value1, variable2: value2 },
async:false
}).success(function(data) { returnData = data; });
return returnData;
};
I have a JavaScript bootstrapper module that I'm trying to keep very clean and simnple: Currently I have code like:
function bootStrapper() {
xmlRepository.getAll().done(function (result) {
autoPolicyForm.show();
});
}
In xmlRepository I am using a deferred object within getAll();
function getAll () {
var d = $.Deferred();
$.ajax({
type: "GET",
url: "http://localhost/Autopolicy/dataSource.xml",
dataType: "xml",
success: function (xml) {
d.resolve(xml);
}
});
return d.promise();
}
This code is working well but I would really like to simplify the bootstrapper code further to something like:
function bootStrapper() {
var result = xmlRepository.getAll();
autoPolicyForm.show();
});
}
Everything I try results in 'result' being undefined due to the async nature of call.
Does anyone know how to modify the code to move the complexity to the xmlRepository so that the above can be achieved?
Thanks
In modern jQuery the ajax function returns a promise so you can simplify getAll to :
function getAll () {
return $.ajax({
type: "GET",
url: "http://localhost/Autopolicy/dataSource.xml",
dataType: "xml"
});
}
In other words it is now possible to do
$.ajax(url).done(function(xml){...});
You could also change getAll to
function fetchAll (callback) {
$.ajax({
type: "GET",
url: "http://localhost/Autopolicy/dataSource.xml",
dataType: "xml"
}).done(callback);
}
So you'll do
xmlRepository.fetchAll(function (result) {
autoPolicyForm.show();
});
But apart setting async to false, you can't avoid passing a function as the execution is asynchronous. And you should consider that a javascript application is naturally event based so it's fine for the users of an API to use and pass anonymous functions (callbacks).
So, I created an object which makes an AJAX call to populate its properties during the initialization phase. However, I am running into a very weird behaviour: I can print and see the property values fine within the $.ajax() scope, but any public method that returns the value of properties have a return value of "undefined".
Here's what the JS code looks like:
function MyFunction() {
this.myProperty;
this.init();
}
Myfunction.prototype.getPropertyValue = function () {
alert(this.myProperty); // returns 'undefined'
}
Myfunction.prototype.init = function () {
$.ajax({
type: 'get',
url: "getProperty.php",
dataType: "json",
success: function(response) {
this.myProperty = response[0].Property;
alert(this.myProperty) // returns 'Property Name'
}
});
}
My thinking is that within the $.ajax() scope, 'this' is actually referring to something else. So, my question is how do I make sure that 'this.myProperty' is set and doesn't lose its value once we get outside of the AJAX scope?
Any help is much appreciated.
Part of the reason why you're getting "undefined" because of the way you establish the value:
var MyFunction = function () {
this.myProperty;
alert(this.myProperty); // undefined!
this.init();
};
When you declare properties (or variables) without specifying a value, they default to "undefined". Instead:
var MyFunction = function () {
this.myProperty = false;
alert(this.myProperty); // false
this.init();
};
On to the ajax call. You are right that the scope of the callback is not the same as the object. this, in the ajax success function, refers to the jQuery-wrapped XHR object. When you call this.myProperty = response[0].Property, you are actually creating a new property on the ajax object and setting its value. To correct this, you can either use the context option of the jQuery ajax object, OR bind the callback function using the javascript bind method:
success: function(response) {
this.myProperty = response[0].Property;
}.bind(this)
... or:
$.ajax({
type: 'get',
url: "getProperty.php",
dataType: "json",
context: this,
success: function(response) {
this.myProperty = response[0].Property;
}
});
Try it here: http://jsfiddle.net/SnLmu/
Documentation
bind() on MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
jQuery.ajax() - http://api.jquery.com/jQuery.ajax/
Functions and Function Scope on MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope
Part of the problem is that the ajax is asynchronous so the properties may not be set when you try to access them (race condition). The other is the value of this inside of the ajax call is not Myfunction. You can fix by:
Myfunction.prototype.init = function () {
var that = this;
$.ajax({
type: 'get',
url: "getProperty.php",
dataType: "json",
success: function(response) {
that.myProperty = response[0].Property;
alert(that.myProperty) // returns 'Property Name'
}
});
}
or you can use the context setting in the ajax call. Per the site:
This object will be made the context of all Ajax-related callbacks. By
default, the context is an object that represents the ajax settings
used in the call ($.ajaxSettings merged with the settings passed to
$.ajax). For example, specifying a DOM element as the context will
make that the context for the complete callback of a request, like so:
Myfunction.prototype.init = function () {
var that = this;
$.ajax({
type: 'get',
url: "getProperty.php",
dataType: "json",
context: Myfunction,
success: function(response) {
this.myProperty = response[0].Property;
alert(this.myProperty) // returns 'Property Name'
}
});
}
var MyFunction = {
myProperty: null,
init: function() {
var self = this;
self.ajax(function(response) {
self.myProperty = response;
self.secondfunction(self.myProperty); //call next step only when ajax is complete
});
},
ajax: function(callback) {
$.ajax({
type: 'get',
url: "getProperty.php",
dataType: "json"
}).done(function(response) {
callback(response[0].Property);
});
},
secondfunction: function(prop) {
alert(prop);
}
}
$(function() {
MyFunction.init();
});
I am trying to implement Repository pattern in JavaScript. I have ViewModel which i want to initialize with the data when i call Initialize method on it. Everything seems to be falling in places except that i am not able to return the data from my AJAX call. I can see that data is coming back from the ajax call but when i trying to capture the data in SomeViewModel's done function, it is null.
Can someone please point me out where i am going wrong here?
P.S: Please notice that i am not making Async call so the call chain is properly maintained.
This is how my Repository looks like:
function SomeRepository(){
this.LoadSomeData = function loadData()
{
$.ajax({
type: "POST",
url: "someUrl",
cache: true,
async: false,
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
//success: handleHtml,
success: function(data) {
alert('data received');
return data;
},
error: ajaxFailed
});
function ajaxFailed(xmlRequest) {
alert(xmlRequest.status + ' \n\r ' +
xmlRequest.statusText + '\n\r' +
xmlRequest.responseText);
}
}
};
This is how my ViewModel looks like:
function SomeViewModel(repository){
var self = this;
var def = $.Deferred();
this.initialize = function () {
var def = $.Deferred();
$.when(repository.LoadSomeData())
.done(function (data) {
def.resolve();
});
return def;
};
}
This is how i am calling from an aspx page:
var viewModel = new SomeViewModel(new SomeRepository());
viewModel.initialize().done(alert('viewmodel initialized'));
alert(viewModel.someProperty);
I have used successfully an auxiliar variable to put the ajax result, when ajax call is inside a function (only works if ajax is async=false) and i need the function does return the ajax result. I don't know if this is the best solution.
function ajaxFunction(){
var result='';
$.ajax({
type: "POST",
url: "someUrl",
cache: true,
async: false,
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
//success: handleHtml,
success: function(data) {
alert('data received');
result=data;
},
error: ajaxFailed
});
return result;
}
Doesn't matter that it's synchronous (though it really shouldn't be). Returning a value from inside the ajax callback will not cause the value to be returned from the containing function.
Using asynchronous ajax is generally a much better idea anyway, but that will force you to create an API that allows its clients to pass in handlers to be called when the ajax request completes. To do that, you'd give your "LoadSomeData" function a parameter. A caller would pass in a function, and your ajax "success" handler would pass on the results (or some transformation of the results; depends on what it is that you're doing) to that callback. It's the same idea as the callbacks used in the ajax call itself.