I am trying return callback value outside callback function example:
I make the function based in topic: How do I return the response from an asynchronous call?
(function (){
return getAjaxResult(function(result) { return result; });
//<-- Return Undefined (in console log return correct value)
})();
function getAjaxResult(callback){
$.ajax({
url: 'myurl',
type: 'GET',
success: function (result)
{
if (result === 'working'){
callback(result);
}else if (result === 'notworking'){
callback('notworking');
}
}
})
}
Return "Undefined" (in console log return correct value).
I do not know if this is the best option to return an ajax value in callback
There are two ways to do this, you can use async false but is deprecated and you can always use a promise:
do a function like this:
function ajaxCallback(id){
return $.ajax({
method: "POST",
url: "../YourUrl",
data: { id: id}
})
}
then call it like this:
if (id != '')//
{
ajaxCallback(id)
.done(function( response ) {
//do something with your response
});
}
Hope it helps
Related
I am trying to call the function itself within the function.
Basically it will call the function itself to make another request if the first request has the id.
I have something like
function test(variable) {
var q = $q.defer();
$http({
method: 'get',
url: 'myurl.com'
}).then(function(returnData) {
if(returnData.getNewInfo) {
test(returnData.id).then(function(secondData){
q.resolve(secondData);
})
} else {
q.resolve(returnData)
}
});
}
return q.promise;
}
I am getting
test(...).then is not a function error in the console on this line
test(returnData.id).then(function(secondData){
I am trying to call the function itself inside the promise. Not sure how to fix my issue. Can anyone help me about it? Thanks a lot!
Fix your code indentation and you'll get the below - see my comment about the stray brace. So the function is returning undefined rather than q.promise.
function test(variable) {
var q = $q.defer();
$http({
method: 'get',
url: 'myurl.com'
}).then(function(returnData) {
if (returnData.getNewInfo) {
test(returnData.id).then(function(secondData) {
q.resolve(secondData);
})
} else {
q.resolve(returnData)
}
});
} // <------- end of function - should be removed?
return q.promise;
}
You can return your $http call. Promises are chainable and $http returns a promise.
function test(variable) {
return $http({
method: 'get',
url: 'myurl.com'
}).then(function (returnData) {
if (returnData.getNewInfo) {
return test(returnData.id);
} else {
return returnData;
}
});
}
Try this:
function test(variable, callback) {
/*snip*/
callback();
/*snip*/
}
test("foo",test);
I need to combine three methods:
An AJAX to check the existence of a code
If the code exists, confirm whether to overwrite
Overwrite
I've written three methods that return a $.Deferred in order to chain them together with .done(), which are below:
function checkFunction() {
var code = $("#code").val();
return $.ajax({
url: "${pageContext.request.contextPath}/dataManagement/codeMaintenance/check",
method: "POST",
async: false,
data: {
"reasonCode": code
},
success: function(response, textStatus, jqXHR) {
var exists = response.dataMap.exists;
console.log("Code exists: " + exists);
if (exists == true) {
return $.Deferred().resolve(true);
} else {
return $.Deferred().reject();
}
}, error: function() {
return $.Deferred().reject("AJAX ERROR");
}
});
};
var confirmFunction = function(codeExists) {
console.log("Confirming overwrite");
if (codeExists == true) {
var confirm = confirm("Code Exists: Do you wish to overwrite?");
if (confirm == true) {
return $.Deferred(true);
} else {
return $.Deferred(false);
}
} else {
return $.Deferred(true);
}
};
var saveFunction = function() {
console.log("Saving");
var code = $("#code").val();
return $.ajax({
url: "${pageContext.request.contextPath}/dataManagement/codeMaintenance/save",
method: "POST",
data: {
"reasonCode": code
},
success: function(response, textStatus, jqXHR) {
alert("test");
return $.Deferred(true);
}
});
};
I then attempt to execute via this line:
checkFunction().done(confirmFunction(codeExists)).done(saveFunction());
Unfortunately, the parameter I set on the $.Deferred from the first method does not get passed as a parameter to confirmFunction().
What am I doing wrong?
Jason
In short: plenty.
You try to use return inside of asynchronous functions in the success handlers of your $.ajax() calls.
Here you pass the result of the function call and not a reference of the function as callbacks:
checkFunction().done(confirmFunction(codeExists)).done(saveFunction());
This should be more like this:
checkFunction().done(confirmFunction).done(saveFunction);
In confirmFunction() you return a new Deferred object. What you should do is create a Deferred object, return the respective promise and then resolve/reject the Deferred object. So, e.g., your checkFunction() function should look like this:
function checkFunction() {
var code = $("#code").val();
// create deferred object
var result = $.Deferred();
return $.ajax({
url: "${pageContext.request.contextPath}/dataManagement/codeMaintenance/check",
method: "POST",
async: false,
data: {
"reasonCode": code
},
success: function(response, textStatus, jqXHR) {
var exists = response.dataMap.exists;
console.log("Code exists: " + exists);
if (exists == true) {
result.resolve(true);
} else {
result.reject();
}
}, error: function() {
result.reject("AJAX ERROR");
}
});
return result.promise();
}
I have over 50 AJAX calls from different functions of my code. All these calls have a similar structure with different data/url/callback params:
var jqXHR = $.post('/dba/port.php', {
mode: "del_wallfunds",
pdata: cdata,
wname: wName
},
function (data) {}, "json")
.done(function (data) {
var msg = data.msg;
if (msg.indexOf("Error") == -1) {
alertify.success(msg);
delSelected(selGroup);
} else {
alertify.error(msg);
}
})
.fail(function () {
alertify.error("Error .....");
});
I am thinking how to write a function that would return that var jqXHR to minimize the total size of the code. It is not a problem to pass all static variables like URL, error strings etc. But the problem is that all callback functions on ".done" are different and I don't know how to pass these callback functions as variables.
One way would be to call a single "universal" function on .done and pass a "switch" variable to that function, but it doesn't seem to be an elegant solution.
Any suggestions how to it in some elegant way?
Thanks
Either pass the done callback function as an argument when calling your function:
function ajaxCall(url, data, doneCallback) {
return $.post(url, data, doneCallback, "json").fail(...);
// or
return $.post(url, data, function() {}, "json").done(doneCallback).fail(...);
}
var jqXhr = ajaxCall('yoururl.php', {key: 'value'}, function(data) {
// do something
});
Or return the jqXhr object from the function, and assign the done callback then:
function ajaxCall(url, data) {
return $.post(url, data, function() {}, "json").fail(...);
}
var jqXhr = ajaxCall('yoururl.php', {key: 'value'});
jqXhr.done(function(data) {
// do something
});
Alternatively switch to using jQuery.ajax() instead, and pass the entire options object in:
function ajaxCall(options) {
return $.ajax(options).fail(...);
}
var jqXhr = ajaxCall({
url: 'yoururl.php',
data: {key: 'value'},
dataType: 'json'
});
jqXhr.done(function(data) {
// do something
});
You can try to :
turn "request successfully returned a treatment error" into a "rejected request",
put the "alertify" processing in a common callback
Here is a sketch of what this could give :
function myAjaxApi(url, data){
var myAjaxCall = $.post(url, data, function (data) {}, "json")
.then(function (data) {
// using .then : change "request succesful with error state"
// to "rejected state"
var msg = data.msg;
if (msg !== undefined && msg.indexOf("Error") >= 0) {
var dfd = $.Deferred();
// try to match the same signature as the "error" option
dfd.reject(this, msg);
return dfd;
} else {
return data
}
});
myAjaxCall.done(function(data){
if (data.msg) {
alertify.success(data.msg);
}
}).fail(function (jqxhr, msg) {
if (!msg) { msg = "Error ....."; }
alertify.error(msg);
});
return myAjaxCall;
}
//usage
myAjaxApi('/dba/port.php', {mode: "del_wallfunds", pdata: cdata, wname: wName})
.done(function (data) {
// the ".done()" queue will not be executed if msg contains "Error" ...
delSelected(selGroup);
});
Some parts should be written with more care ; the above example is meant to illustrate how you can wrap your repeated ajax calls inside a common api.
I have a method below:
self.getOrAddCache = function (key, objectFactory) {
var data = self.getFromCache(key);
if (!data) {
data = objectFactory();
if (data && data != null)
self.addToCache(key, data);
}
return data;
};
I use like this:
function getCities()
{
var cities = getOrAddCache(CacheKeys.Cities, function() {
var cityArray = new Array();
// get city informations from service
$.ajax({
type: "GET",
async: true,
url: "service/cities",
success: function (response) {
$.each(response, function(index, value) {
cityArray.push({
name: value.name,
id: value.id
});
});
}
});
if (cityArray.length > 0)
return cityArray;
else {
return null;
}
});
return cities;
}
getCities function always return null because getCities not waiting for completion async ajax request.
How can i resolve this problem? (Request must be async)
The best solution for this is to use Deferred objects. Since you require your AJAX call to be asynchronous, you should have your getCities function return a promise to return that data at some point in the future.
Instead of storing the raw data in the cache, you store those promises.
If you request a promise that has already been resolved, that will complete immediately. If there's already a pending request for the cached object, the async AJAX call will be started and all outstanding callbacks waiting for that promise will be started in sequence.
Something like this should work, although this is of course untested, E&OE, etc, etc.
self.getCached = function(key, objectFactory) {
var def = self.getCache(key);
if (!def) {
def = objectFactory.call(self);
self.addToCache(key, def);
}
return def;
}
function getCities() {
return getCached(CacheKeys.Cities, function() {
return $.ajax({
type: 'GET',
url: 'service/cities'
}).pipe(function(response) {
return $.map(response, function(value) {
return { name: value.name, id: value.id };
});
});
});
}
Note the usage of .pipe to post-process the AJAX response into the required format, with the result being another deferred object, where it's actually the latter one that gets stored in your cache.
The usage would now be:
getCities().done(function(cities) {
// use the cities array
});
With a callback:
function getCities(callbackFunction)
{
var cities = getOrAddCache(CacheKeys.Cities, function() {
var cityArray = new Array();
// get city informations from service
$.ajax({
type: "GET",
async: true,
url: "service/cities",
success: function (response) {
$.each(response, function(index, value) {
cityArray.push({
name: value.name,
id: value.id
});
});
callbackFunction(cityArray);
}
});
});
}
getCities(function(cityArray){
// do stuff
});
You can't return the result from a function fetching asynchronously the data.
Change your getCities function to one accepting a callback :
function fetchCities(callback) {
var cities = getOrAddCache(CacheKeys.Cities, function() {
var cityArray = new Array();
// get city informations from service
$.ajax({
type: "GET",
async: true,
url: "service/cities",
success: function (response) {
$.each(response, function(index, value) {
cityArray.push({
name: value.name,
id: value.id
});
});
if (callback) callback(cityArray);
}
});
});
}
And use it like this :
fetchCities(function(cities) {
// use the cities array
});
Note that it's technically possible, using async:true, to make the code wait for the response but don't use it : that's terrible practice and it locks the page until the server answers.
You seem to be contradicting yourself.
Something that is asynchronous, by definition, does not pause the script to wait for the end of it's execution. If it does wait, it cannot be asynchronous.
The best wayto fix this is by adding a callback function in your ajax success function that passes the end result to another function, which handles the rest of the execution.
How do you write a function that returns a value fetched from server via $.get?
This is what I have tried, which does not work:
function getMessage(key) {
$.get("/messages.json", function(data) {
return data.messages[key];
}, "json");
}
Any ideas?
Because Ajax requests are asynchronous. That is why you have to pass a callback to $.get, to handle the data once it is available. But the getMessage function returns before the $.get callback is executed.
You have to pass a callback that is doing something with the return value. E.g.:
function getMessage(key, cb) {
$.get("/messages.json", function(data) {
cb(data.messages[key]);
}, "json");
}
getMessage('foo', function(data) {
alert(data);
});
Of course you can also pass the callack directly to $.get and handle the data extraction there:
function getMessage(cb) {
$.get("/messages.json", cb);
}
There are two ways to handle this: use a synchronmous call via $.ajax or pass in a callback to your function instead of having it return a value. The latter is the canonical way to deal with AJAX since it retains the asynchronous nature of the call.
Asynchronous
function processMessage(key,elem,cb) {
$.get('/messages.json', function(data) {
if (cb && typeof(cb) === 'function') {
cb.apply(elem,data.messages[key]);
}
}
}
$('.something').each( function() {
processMessage('somekey', this, function(msg) {
$(this).append(msg);
});
});
Synchronous - try not to do it this way, since you'll lock your browser until it's done.
function getMessage(key)
{
var result = '';
$.ajax({
url: '/messages.json',
aSync: false,
type: 'get',
dataType: 'json',
success: function(data) {
result = data.messages[key];
}
});
return result;
}
$('.something').each( function() {
var msg = getMessage('somekey');
$(this).append(msg);
});
Note: these are untested.