This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 7 years ago.
var test = null;
$.get("/zeWebsite.php?blarg=421", function(data){
test = data.trim();
});
alert(test);
I always thought declaring the variable from outside the function before hand gave access to the variable even if called within the function. However, my test variable is still alerting as null.
It is likely an order issue as the $.get function is asynchronous. The callback of the get is not being run until after the alert has already fired.
The alert is being run BEFORE the get has completed. You need to make sure the get is complete before alerting by triggering alert within the callback.
Try:
var test = null;
$.get("/zeWebsite.php?blarg=421", function(data){
test = data.trim();
alert(test);
});
or
var test = null;
$.get("/zeWebsite.php?blarg=421", function(data){
test = data.trim();
outside();
});
function outside() { alert(test); }
it just not assigned yet..
You can simple wait for it:
var test = null, inprocess = true;
$.get("/zeWebsite.php?blarg=421", function(data){
test = data.trim();
inprocess = false;
});
var wait = setInterval(function(){
if (!inprocess) {
clearInterval(wait);
alert(test);
}
}, 500);
But this code is awful. Much better to trigger callback directly:
var test = null;
$.get("/zeWebsite.php?blarg=421", function(data){
test = data.trim();
anyactionwithtest(test);
alert(test);
});
Or use something like jquery deffered promise:
var test = null;
$.get("/zeWebsite.php?blarg=421", function(data){
test = data.trim();
}).done(function (data){
// data also accessible here as is
alert(test);
});
This is because you are using the variable before the get statement execute completely.
Test will get the value when the get function callback call.
If you place alert in get function then it will call at last.
Related
This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 1 year ago.
I have a global variable called result and a function, with the purpose of changing the value of result. here's the code I've tried:
checkdate();
function checkdate() {
//defining startdate,enddate,hotel_id
$.ajax({
method: 'GET',
url: '/checkdate',
data: {startdate : startdate, enddate : enddate, checkroom : 1, hotel_id : hotel_id},
success: function(response){
storeResponse(response);
}
});
}
var result = [];
function storeResponse(response) {
window.result = response;
}
alert(result);
The alert returns nothing, however if I put the alert INSIDE the function, it returns response alright. This seems to be easy but I can't figure it out.
The function is invoked before all this code.
There are two things you need to know here:
var result is not same as window.result so use window.result = "Test"; and not the var declaration.
You need to invoke storeResponse() before alert code so that it set the new value and then get that value in alert.
window.result = "Test"; //in global scope
function storeResponse(response) {
window.result = response;
console.log(window);
}
storeResponse("Hello");
alert(result);
You should call the function first so that the result variable is populated.
var result = []; //in global scope
function storeResponse(response) {
window.result = response;
}
storeResponse('callSomething');
alert(result);
You said you are invoking the function first, so you must have something like this:
storeResponse('someResponse');
var result = []; //in global scope
function storeResponse(response) {
window.result = response;
}
alert(result);
The issue is the following:
In first line you are calling your function. The function sets a new result var in the window, global scope
In the second line, you are overwriting the result var: var result = []; It lets you with an empty array, that's why the alert looks empty
Try commenting the second line and it will work:
storeResponse('someResponse');
//var result = []; //in global scope
function storeResponse(response) {
window.result = response;
}
alert(result);
Or even better, declare the var first:
var result = [];
storeResponse('someResponse');
function storeResponse(response) {
result = response; // You don't need to use window (if the var is not declared inside the function, is global by default)
}
alert(result);
Thats because AJAX is asynchronous. Meaning the code is non-blocking.
Imagine the AJAX call being passed to another thread for processing while the rest of the code is executed. The alert is triggered before the AJAX request has received it's response. Thats why if you do the alert inside the callback it works.
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 function that returns JSON information. I want to be able to store that into a variable and then use alert and the variable name to display the content returned from that function. Here is my code:
var getStuff2 (function (num) {
$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://catholic.com/api-radio/' + num) + '&callback=?', function(data) {
//console.log(data.contents);
//$('#response').text(data.contents);
obj = data.contents;
//alert(obj);
}];
return data.contents;
});
});
function getData(){
getStuff2(6387);
}
getData();
alert(getStuff2);
You have to put the alert inside of the callback handler for the AJAX function. AJAX calls are asynchronous which means that if you do something like this, the return won't work in the order you expect:
function getData() {
doAjax(function(data) {
obj = data.contents;
});
alert(obj);
}
You see, the AJAX call will return when it returns, and all of the code after it will just keep executing while the AJAX call is still waiting on a response.
So what you have to do is this:
function getData() {
doAjax(function(data) {
obj = data.content;
alert(obj);
});
}
I assume, that data.contents is a object, so your alert output will look something like [object object], so you just can't alert the content.
To make it globally available just store the content in a gloabl variable.
var result;
var getStuff2 (function(num) {
$.getJson(url, function(data)
result = data.contents;
});
}),
asynchronous functions cannot return values. Instead you need to explicitly do something with the value from inside the AJAX callback.
function getStuff(num, onContents){
$.getJSON(..., function(data){
//call the oncontents callback instead of returning
onContents(data.contents);
});
}
//when calling getstuff, pass a function that tells what to do with the contents
getStuff(6387, function(contents){
console.log(contents);
});
I have a simple function like this that has a async function inside
of it:
var b = function(response) {
response = '';
async_function(function (response) {
response = 'test';
});
}
I want to test function b to see if it sets the value of response
to "test". If not, it should raise an error. I do not want to add a parameter
for callback function for b and I do not want to wait using setTimeOut().
What is the correct way to test b using mocha (and chai)?
Thanks you!
var b = function(response) {
response = '';
async_function(function (response) {
response = 'test';
});
}
You cant know when response will be set.
Unless you use setTimeout you cant test it,therefore you should refactor your code.
I have one simple question, been searching on Stack Overflow there are some questions on this topic but can't get a working solution.
I have a simple function for getting number of page likes on Javascript SDK:
function getLikes(div, graf) {
var numblike;
FB.api(graf, function(response) {
var numblike = response.likes;
$(div).prepend(numblike);
});
return numblike; // can't get it to return
}
var pLike = getLikes ("#mydiv", /app_id); // always undefined
Function works and it pre-pends the right number to my div but return always sets my variable to undefined. I understand that the script runs asynchronous and I need to use a callback function but I just can't get it right.
This is called javascript event loop. you can't return numblike from the function cause it's set only in the callback of FB.api.
So you can do similar to that - just send callback:
function getLikes(div, graf,callback) {
FB.api(graf, function(response) {
var numblike = response.likes;
$(div).prepend(numblike);
callback(numblike);
});
}
getLikes ("#mydiv", /app_id,function(numblike){
alert(numblike);
}); // always undefined
You have decalred numblike two times, just remove var declaration in the second one:
function getLikes(div, graf) {
var numblike;
FB.api(graf, function(response) {
numblike = response.likes; // var removed
$(div).prepend(numblike);
});
return numblike;
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
return from a function ajax
JavaScript asynchronous return value / assignment with jQuery
How do you output the data variable to the second alert statement.
$.post("index.ajax.php", { lookup:value },
function(data) {
alert(data)
test = data;
})
alert(test)
Or would it be possible to do something like this?
function confirm_search(input) {
$.post("index.ajax.php", { lookup:input },
function(data) {
$("#temp").val(data);
})
}
var test = confirm_search(value);
alert(test);
You can't.
AJAX is asynchronous. The response is not available until some time later.
The jQuery.post call will begin the AJAX request, and return the jqXHR object which is handling the request. The script will continue to be executed (alert(test) will fire next), and then some time later when the AJAX request has completed (i.e. the HTTP response is received), the callback:
function(data) {
alert(data)
test = data;
}
will be executed.
If you are strict with scenerio, define test variable in global scope, in that way you can use it anywhere in your code.
Try this way :
var test;
$.post("index.ajax.php", { lookup:value },
function(data) {
alert(data)
test = data;
})
function alertTest(){
if(test != undefined) {
alert(test);
clearInterval(t);
}
}
var t = setInterval(alertTest, 1000);
You will get test value when ajax request is completed and test is assigned