This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I'm playing around with using the forecast.io API to (eventually) make something that will email me every day about the weather in my area. When I make a request to the API, it gives me a JSON object with all the information in it. I'm using JavaScript and PHP write this. Here is the code I have so far (it's a bit messy right now):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
var latitude = "42";
var longitude = "-71";
var coordinates = latitude + "," + longitude;
var forecast;
$.ajax({
url: "<?php echo $_SESSION['url'] ?>42,-71",
type: "GET",
dataType: "jsonp",
crossDomain: true,
jasonpCallback: 'blah',
success: function(data) {
forecast = data;
console.log(forecast.daily.summary);
},
error: function() {
console.log("This failed.");
}
});
//**********************************
document.write(getDailySummary());
//**********************************
function getDailySummary() {
var summary = forecast.daily.summary;
return "<p>" + summary + "</p>";
}
</script>
Right now, the $.ajax() statement runs successfully, and the forecast summary is logged in the console. However, the getDailySummary() doesn't run so well. I get the following error when I run this:
Uncaught TypeError: Cannot read property 'daily' of undefined index.php:42
getDailySummary index.php:42
(anonymous function) index.php:37
Rain on Thursday and Friday; temperatures rising to 85° on Saturday. index.php:28
This makes it sound like forecast is undefined. My initial thought is that it has to do with scope, but I've tried fiddling around with all sorts of things, including defining forecast as window.forecast, but I always get this error. Where am I going wrong?
Ajax is Asynchronous.
The line below ajax method executes before the data is populated. Call that function inside the success handler
So when you try to access the forecast object it is still undefined.
success: function(data) {
forecast = data;
console.log(forecast.daily.summary);
getDailySummary(forcast);
},
And never use document.write to write to your HTML. Try appending the data to some element on the page.
The line:
document.write(getDailySummary());
gets called before the ajax call successfully completes, which is why you get the error as forecast has not yet been assigned.
Ajax is asynchronous
Related
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I am having a problem setting some global variables to use outside of the script that I am writing. I believe that I am setting them correctly but they don't seem to be cooperating. My console output is always an empty string, where as they are supposed to be defined inside the primary calling function of the demo web page. All of the other data seems to be working fine, if I print it out without setting it to a variable then it works fine. However I need the variables so that I can call them outside of this script. Any ideas?
var latitude = "", longitude = "";
$(document).ready(function() {
$.ajax({
dataType: "json",
url:"http://api.geonames.org/searchJSON?q=Atlanta&maxRows=10&username=Demo"
}).then(function(data){
console.log(data);
latitude = data.geonames[0].lat; <---Variables are supposed to be set here
longitude = data.geonames[0].lng; <----Variables are supposed to be set here
$('.map-Latitude').append(data.geonames[0].lat); <----Works well
$('.map-Longitude').append(data.geonames[0].lng); <----Works Well
});
});
console.log("Latitude is: " + latitude); <---- prints out an empty string
console.log("Longitude is: " + longitude); <---- prints out an empty string
I cant seem to get this to work, I feel like I am setting the variables properly but they don't seem to be working well. Thanks!
Your $.ajax() call is asynchronous. The results of the call are not available until the HTTP response is received by the browser.
Put your console.log() calls inside the .then() function.
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I want to overwrite the status variable from the ajax call.. i tried in this way but its not overwriting the status variable... Please help me.
function myfunction()
{
var status = "";
$.ajax({
type: 'POST',
url: "<?php echo base_url() ?>login/ajaxsessioncheck/",
success: function(data)
{
status="new value";
}
});
alert(status)
return status;
}
A possible solution could be something like,
function ajaxsessioncheck(myCallback)
{
var status = "";
$.ajax({
type: 'POST',
url: "<?php echo base_url() ?>login/ajaxsessioncheck/",
success: function(data)
{
//status="new value";
myCallback(data);
}
});
// alert(status)
// return status;
}
So what you probably want to do is,
if(ajaxsessioncheck()){
//then session still exists
}
but you should actually do something like,
ajaxsessioncheck(function(data){
status = "new value";
alert(status);
//go to next page
//or do next action that is only allowed if session still exists
});
Also the thread mentioned in the comment by Arun P Johny ,How do I return the response from an asynchronous call? ,provides a thorough explanation of how to tackle this specific problem and the issues related to the synch and asynch behaviour of ajax requests.
You're lacking basic understanding of how AJAX calls work. AJAX calls are asynchronous. Your code keeps executing while the call is being processed. The code inside your success callback will only execute after the current executing code finishes (when javascript relinquishes control back to the browser) and when the AJAX request is finished. If you put the alert after status = "new value" you'll see it gets the right value.
FIDDLE
An ajax call is Async by default so when you return status the new value for status is probably not set. Either make your ajax call synchronous or define your status variable in the outer scope and then just set it inside the success callback.
var status = "";
alert(status);
function ajaxsessioncheck(){
$.ajax({
type: 'POST',
url: "<?php echo base_url() ?>login/ajaxsessioncheck/",
success: function(data){
status="new value";
alert(status);
// write code for additional functionality that needs to be executed after the new value has been set for status here.. of just make a call to another function that handles further operations..
doSomethingWithNewStatus();
}
});
}
ajaxsessioncheck();
function doSomethingWithNewStatus() {
alert("Here is your new status " + status);
}
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I'm new in the web programming and I don't fully understand some simple things.
Suppose we have following ajax request:
var records = [];
$.ajax(
{
url : "index",
dataType: 'json',
success: function (response)
{
records = response;
}
});
alert(records.length);//This displays 0
alert(records.length);//This alert correctly displays number of records
The problem is that the array records appears empty, if I try to use them immediately after calling ajax (first alert displays zero length, while second alert displays correct length). What's the problem and how to solve it?
You just need to put your alert inside the success callback.
var records = [];
$.ajax(
{
url : "index",
dataType: 'json',
success: function (response)
{
records = response;
alert(records.length); // will always be correct
}
});
In your example, the behavior will be unpredictable and will depend on how fast the call returns.
The A in Ajax stands for Asynchronous
The success function doesn't trigger until the HTTP response comes back.
When the first alert fires, it hasn't come back. In the time it takes for you to click OK to that alert, the response has arrived so the success function has run by the time the second alert fires. (alert is a blocking function).
Do your work on the data in the success function, not immediately after sending the HTTP request.
I have the following Ajax call:
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/addItemToBasket',
dataType: 'json',
data: {
id: window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1),
amount: amount
},
success: function (data) {
alert(data);
var dat = JSON.parse(data);
}
}
});
Now this calls the following method in php:
public function addItemToBasket()
{
if ($this->request->is('post')) {
//todo delete efter at have insat fancybox med valg af antal styk. (sendes via ajax).
$shopping = null;
$item = $this->Product->find('first',array('conditions' => array('Product.id' =>$this->request->data['id'])));
if(isset($_SESSION['basket'])){
$shopping = $_SESSION['basket'];
}else{
$shopping = array();
}
array_push($shopping,$item);
$_SESSION['basket'] = $shopping;
echo json_encode($_SESSION['basket']);
}
}
When i try to debug it everything is working (it gets into the php function) and updates my $_SESSION variable.
BUT it never runs the success function and it never alerts the data.
What am i doing wrong?
NOTE: I know this question is from a couple of months ago, but any help will be useful for people looking for answers to this kind of problems.
As far as I know, because I'm running with a similar problem, it all depends on the response you get from the webservice (you can check it out with Chrome debugging console). For instance, I'm getting this now:
readyState: 4
statusText: "OK"
responseText: (The result I am looking for)
The problem is, as you say, I always get to run the Error part of the callback, never the Success, even if I'm getting the right responseText. As I've read, that's because the call to the WS was OK, but the parsing from JSON wasn't, so it calls "error".
So far I don't know how to fix it, but maybe this will give a clue.
I have coded this function to detect and update postLat and postLon variables.
function searchAddSubmit(){
var shopId = 1; //random number to test the function
var postLon, postLat;
var shopTime = $("#selected-search-result-minutes").val();
navigator.geolocation.getCurrentPosition(function(position){
postLat=position.coords.latitude;
postLon=position.coords.longitude;
console.log(postLat);
console.log(postLon);
console.log('reun');
},function(error){});
console.log(postLat+" 1231");
console.log(postLon+" 1231");
$.ajax({
type: "POST",
url: "search-add-process.php",
cache: false,
dataType: "json",
data:{
id: shopId,
time: shopTime, //this value is taken from a form input
lat: postLat,
lon: postLon
},
success: function (data) {
if(data.error === true) {
alert(data.msg);
} else {
alert(data.msg);
//remove output when successful
}
}
});
}
I used Chrome's Javascript Console tool to examine the variables (as printed with console.log()) and this is the result:
undefined 1231
undefined 1235
1.2957797
103.8501069
ruen
Coming to this point, I have these questions:
Why are the variables postLon and postLat are not updated? In fact, the undefined variables are passed over to search-add-process.php in the ajax block, not the actual values.
Why navigator.geolocation.getCurrentPosition() function runs after the console.log(postLat+" 1231") line? Correct me if I am wrong, I always assumed that Javascript would execute line by line.
You first tell the Geolocation API to try to find the current position of the user, and you let it go and search while you do the rest of your work. This is called Asynchronous Execution. In other words, you let the Geolocation API take its time to search and find the place of the user, while you do the rest of your job (rest of your code is getting executed). Then when the API found the position, it executes the function you've passed to it.
Take the code of ajax into the success callback and everything would be fine.
Place the whole $.ajax({...}); call within the getCurrentPosition callback function;
e.g. place it directly before or after the line console.log('reun');