This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
Im trying to create an ajax function to get some params of the DB each time, but when I call the ajax method it is not returning correctly, when I do it debug the value was ok, but the return result isn't works.
$(document).ready(function () {
function foo(mod){
var uri="some url";
$.ajax({
type: "GET",
url: uri,
}).done(function( data ) {
return data;
});
}
// alert to get the result is always printing undefined
alert(foo("param_1"));
});
foo can't return the result of the ajax call, because the ajax call is asynchronous. foo returns before the call completes. Moreover, the return in your done handler returns from the done handler, not foo.
You'll need to have foo accept a callback, and then call that:
$(document).ready(function () {
function foo(mod, callback){
var uri="some url";
$.ajax({
type: "GET",
url: uri,
}).done(function( data ) {
callback(data);
});
}
// alert to get the result is always printing undefined
foo("param_1", function( data ) {
alert(data);
});
});
Or if you're really do no processing on it at all before giving it to the callback, you could supply callback to done directly:
$(document).ready(function () {
function foo(mod, callback){
var uri="some url";
$.ajax({
type: "GET",
url: uri,
}).done(callback);
}
// alert to get the result is always printing undefined
foo("param_1", function( data ) {
alert(data);
});
});
You can set async as false, but instead I recommend you to implement success and error handlers that can work async
$(document).ready(function() {
function foo(mod) {
var uri = "some url";
$.ajax({
type: "GET",
url: uri,
success: successHandler,
error: errorHandler
});
}
function successHandler(data, textStatus, xhr) {
// Handle your data here
console.log(data);
//alert(data);
}
function errorHandler(xhr, textStatus, errorThrown) {
// Magic
}
// alert to get the result is always printing undefined
//alert(foo("param_1"));
foo("param_1");
});
Related
I've already read this article How do I return the response from an asynchronous call? However I couldn't come up with a solution.
I'm doing an ajax request
function getdata(url)
{
console.log('Started');
jQuery.ajax({
type: "GET",
url: "http://myserver.com/myscript.php",
dataType: "json",
error: function (xhr) {
console.log('Error',xhr.status);
},
success: function (response) {
console.log('Success',response);
}
});
}
And Console displays everything fine but when I say
var chinese = getdata();
to get the data. I keep getting:
Uncaught TypeError: Cannot read property 'length' of undefined error for this line
var text = chinese[Math.floor(Math.random()*chinese.length)];
Can anybody help me here?
The problem is that you are using an asynchronous method expecting a synchronous result.
Therefore you should use the code in the result of the asynchronous call like the following:
function getdata(url) {
console.log('Started');
jQuery.ajax({
type: 'GET',
url: url,
dataType: 'json',
error: function(xhr) {
console.log('Error', xhr.status);
},
success: function(chinese) {
var text = chinese[Math.floor(Math.random()*chinese.length)];
// Do something else with text
}
});
}
getData('http://myserver.com/myscript.php');
I hope it helps :)
The error you get is because of the asynchronous nature of the call. I suggest you to assign the value after you get the success response from the API like below.
var chinese = getdata();
Then the function getdata() will be like
function getdata(url)
{
console.log('Started');
jQuery.ajax({
type: "GET",
url: "http://myserver.com/myscript.php",
dataType: "json",
error: function (xhr) {
console.log('Error',xhr.status);
},
success: function (response) {
initChinese(response.data);
}
});
}
And create a function initChinese() like
var text;
function initChinese(chinese){
text = chinese[Math.floor(Math.random()*chinese.length)];
}
You can also declare the text variable in global scope and then assign the value to text variable inside the success function without having to create a new function initChinese.
The problem is your getdata function does not return anything. In your getdata function you're doing a ajax request, which is an asynchronous request. So the data you're requesting won't, and can't be returned with your getdata function.
But you will have the requested data in your success function:
function getdata(url)
{
console.log('Started');
jQuery.ajax({
type: "GET",
url: "http://myserver.com/myscript.php",
dataType: "json",
error: function (xhr) {
console.log('Error',xhr.status);
},
success: function (response) {
console.log('Success',response);
var text = response[Math.floor(Math.random()*response.length)];
}
});
}
As I'm not able to test your code, you've to debug the rest on your own. But the response variable will be most likely your "chinese" variable.
You could try using callbacks or you could look at Promises.
The idea with callbacks is that you pass a function that is run after the ajax request is finished. That callback can accept a parameter, in this case the response.
Using callbacks:
function getData(url, successCallback, errorCallback) {
console.log('Started');
jQuery.ajax({
type: "GET",
url: url,
dataType: "json",
error: function(xhr) {
errorCallback(xhr.status);
},
success: function(response) {
successCallback(response);
}
});
}
var chinese;
getData("http://myserver.com/myscript.php", function(response) {
chinese = response; // you can assign the response to the variable here.
}, function(statusCode) {
console.error(statusCode);
});
Using Promises (< IE11 doesn't support this):
function getData(url) {
return new Promise(function(resolve, reject) {
console.log('Started');
jQuery.ajax({
type: "GET",
url: url,
dataType: "json",
error: function(xhr) {
reject(xhr.status);
},
success: function(response) {
resolve(response);
}
});
});
}
var chinese;
getData("http://myserver.com/myscript.php").then(function(response) {
chinese = response;
console.log(chinese);
}, function(statusCode) {
console.error(statusCode);
});
I have gone through many topics on stack overflow for jquery asynchronous AJAX requests. Here is my code.
funciton ajaxCall(path, method, params, obj, alerter) {
var resp = '';
$.ajax({
url: path,
type: method,
data: params,
async: false,
beforeSend: function() {
$('.black_overlay').show();
},
success: function(data){
console.log(data);
resp = callbackFunction(data, obj);
if(alerter==0){
if(obj==null) {
resp=data;
} else {
obj.innerHTML=data;
}
} else {
alert(data);
}
},
error : function(error) {
console.log(error);
},
complete: function() {
removeOverlay();
},
dataType: "html"
});
return resp;
}
The problem is, when I use asyn is false, then I get the proper value of resp. But beforeSend doesn't work.
In case, I put async is true, then its beforeSend works properly, but the resp value will not return properly, Its always blank.
Is there any way to solve both problems? I would get beforeSend function and resp value both.
Thanks
Use async:false and run the function you assigned to beforeSend manually before the $.ajax call:
var resp = '';
$('.black_overlay').show();
$.ajax({
...
Either that or learn how to use callback functions with asynchronous tasks. There are many nice tutorials on the web.
Take the resp variable out from the function
Create one extra function respHasChanged()
when you get the data successfully, use the code
resp = data;respHasChanged();
You can restructure on this way, (why no use it in async way?)
function ajaxCall(path, method, params) {
return $.ajax({
url: path,
type: method,
data: params,
beforeSend: function() {
$('.black_overlay').show();
},
dataType: "html"
});
}
Call in your javascript file
ajaxCall(YOUR_PATH, YOUR_METHOD, YOUR_PARAMS)
.done(function(data) {
console.log(data);
// DO WHAT YOU WANT TO DO
if (alerter == 0 && obj !== null) {
obj.innerHTML = data;
} else {
alert(data);
}
}).fail(function(error) {
console.log(error);
}).always(function() {
removeOverlay();
});
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 7 years ago.
Hey guys I have two simple JavaScript page. One holds the function that returns the object. The other read the returned object.
Unfortunately I am unable to read the returned object.
main.js
var userObj = getUserInfo('2');
console.log(userObj); //undefined
console.log(userObj.name); //undefined
globals.js
function getUserInfo(mapID){
var jqxhr = $.ajax({
url: user_url,
type: "GET",
cache: true,
dataType: "json",
statusCode: {
404: function () {
handleError404("Error 404 at getUserInfo();")
},
500: function () {
handleError500("Error 500 at getUserInfo();")
},
},
success: function (data) {
console.log(data);
var obj = {
name: data.name,
age: data.age,
weight: data.weight
}
console.log(obj); //{name:"Kanye West", age:23, weight:"450lbs"}
return obj;
}
});
}
As you can see, If I was to output the object in the function itself, I see the result. But not if I call it from the main.js page.
Any help would be greatly appreciated!
You don't return anything from getUserInfo so you shouldn't expect anything from it.
You are only returning something in the success callback function. That is is run asynchronously. It doesn't return anything for getUserInfo.
If you want to make your ajax call a separate function you can make it return a promise from $.ajax instead of using a success callback.
function getUserInfo(mapID){
return $.ajax({
url: user_url,
type: "GET",
cache: true,
dataType: "json",
statusCode: {
404: function () {
handleError404("Error 404 at getUserInfo();")
},
500: function () {
handleError500("Error 500 at getUserInfo();")
},
}
});
}
then in main.js
var promise = getUserInfo('2');
promise.done(function(userObj) {
console.log(userObj);
console.log(userObj.name);
});
You are not returning anything.
The success callback function in the $.ajax() call is invoked asynchronously, meaning it is executed after the HTTP request is done.
Also, it is a different function than getUserInfo. At this point you are just returning a value for the success function.
I will suggest using another function that will process whatever you receive in the success call. SO in your successs call you get to add a line like handleObject(obj)
You need to pass as function argument a callback or a promise.
Reason is simple. You are calling an ajax call, which will be finished after your function will end it's call. That is why you need to add a callback/promise.
function getUserInfo(mapID, callback){
var jqxhr = $.ajax({
url: user_url,
type: "GET",
cache: true,
dataType: "json",
statusCode: {
404: function () {
handleError404("Error 404 at getUserInfo();")
},
500: function () {
handleError500("Error 500 at getUserInfo();")
},
},
success: function (data) {
console.log(data);
var obj = {
name: data.name,
age: data.age,
weight: data.weight
}
callback(obj);
}
});
}
In order to execute your function you simply call:
getUserInfo(manId, function(object){
console.log('AJAX results');
});
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I have a small problem, I want to check if a user is logged in via AJAX POST to a PHP and then run the rest of the function, unfortunately the rest of the function is being ran without waiting for the AJAX to finish.. so that's bad news
function checkLogin() {
dat = 'chl=1&x='+Math.random();
$.ajax({
url: "/action.php",
type: "POST",
data: dat,
success: function(data) {
if (data)
return data;
return 0;
},
error: function(data) {
console.log('err'+data);
return;
}
});
}
function anotherFunction() {
logged = checkLogin(); // is the user logged in?
if (logged) {
// do other stuff
console.log('Logged in');
} else {
console.log('Not logged in..');
}
}
So this is my problem, it says logged is undefined.. Is there any solution to this, besides using setTimeout, something more "natural" in terms of time of wait?
AJAX is asynchronous--do it in the success: code.
Make it a synchronous request by adding asynch parameter and set it to false [not recommneded]
$.ajax({
url: "/action.php",
type: "POST",
data: dat,
asynch: false,
success: function(data) {
if (data)
return data;
return 0;
},
error: function(data) {
console.log('err'+data);
return;
}
[Recommended] call your desired method in success call back of Ajax call
$.ajax({
url: "/action.php",
type: "POST",
data: dat,
success: function(data) {
if (data)
return data;
yourDesiredFunctionHere();
return 0;
},
error: function(data) {
console.log('err'+data);
return;
}
I wrote this function as revealing module pattern, but when I call the get method in console by metadataModule.get(); it echoes undefined in console.
var metadataModule = function () {
var metadataurl = 'http://farskids326.com/data.json';
function getMetadata() {
console.log("Metadata Function Called")
$.ajax({
url: metadataurl,
dataType: "json",
success: function (data) {
console.log(data);
}
});
}
return {
get: getMetadata,
};
}();
Where did I made a mistake in this code?
When you are working in the console, the return value of the last expresion is echoed after any command. The method you are using doesn't have an explicit return value. So, that may be why you see undefined.
This probably means that your ajax call is encountering an error. Try changing it to log when either success or error happens, like so:
$.ajax({
url: metadataurl ,
dataType: "json",
success: function(data){
console.log('called success!');
},
error: function(jqXHR, textStatus, errorThrown){
console.log('called error!');
}
});
Then, when you run your code, you should see exactly which callback is being executed. Hopefully, that will give you a good starting point for debugging the issue.
The getMetadata function returns nothing so yes, it will output undefined. for it to respond with the content of the JSON you need to make the ajax call synchronous and return the value you get.
var metadataModule = function () {
var metadataurl = 'http://farskids326.com/data.json';
function getMetadata() {
console.log("Metadata Function Called")
var content = {}
$.ajax({
url: metadataurl,
async : false,
dataType: "json",
success: function (data) {
content = data;
}
});
return content
}
return {
get: getMetadata,
};
}();