Trying to use a callback with .ajax call to assign value to a variable

Question

I'm trying to use a .ajax call, to assign the value from an xml document, to a variable in javascript. I can't quite figure out how to use a callback, I know this topic is well discussed on forums, but I haven't been able to find an example out there that does what I am trying to do. The example below makes a call to Google Maps, and gets a string "Central Standard Time" back. I can use .ajax calls to move the text to a div. But I can't figure out how to assign this to a variable, my_zone, and move that value to a div.

Anyone able to help me out? Please? If someone can do a rewrite of the code here, thanks....

<!DOCTYPE html>
<html>
<head>

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>


<script type='text/javascript'>
$(document).ready(function(){ 

  //this works great, we get the value and it goes to the 'zzz' div, asynchronously
  $.ajax({
 type: "GET",
 url: "https://maps.googleapis.com/maps/api/timezone/xml",
 data: {
            location: '35.129186,-89.970787',
            timestamp: '1389006000',
            sensor: 'false'
        }, 
 dataType: "xml",    
 success: function(xml) {
   var val = $(xml).find('time_zone_name').text();    
   $( "#zzz" ).empty().append( val );  //want to return val  
 }
  });  

  //this is what I am trying to do, get the return'd value, and put it into a variable
  var my_zone = getZone();     //just want to get the value into a variable
  $("#xxx").empty().append(my_zone);   //do something with it, maybe display it          

  function getZone() {
 $.ajax({
   type: "GET",
   url: "https://maps.googleapis.com/maps/api/timezone/xml",
   data: {
   location: '35.129186,-89.970787',
   timestamp: '1389006000',
   sensor: 'false'
   }, 
   dataType: "xml",    
   success: function(xml) {
 var val = $(xml).find('time_zone_name').text();    
 console.log(val);
 return val;  //needs to be part of a Callback 
   }
 });     
  }
  ///////////

});
</script>

</head>
<body>
<div id="xxx">some output here....</div>
<div id="zzz">some output here....</div>

</body>

</html>

score 1 · Answer 1 · answered Jan 10 '14 at 16:11

You can't do that, instead you can pass a callback function to getZone() which will get called once the request is completed with the desired parameter

//pass a callback function which will get called when the ajax request is completed
getZone(function (my_zone) {
    $("#xxx").empty().append(my_zone); //do something with it, maybe display it          
});

function getZone(callback) {
    $.ajax({
        type: "GET",
        url: "https://maps.googleapis.com/maps/api/timezone/xml",
        data: {
            location: '35.129186,-89.970787',
            timestamp: '1389006000',
            sensor: 'false'
        },
        dataType: "xml",
        success: function (xml) {
            var val = $(xml).find('time_zone_name').text();
            console.log(val);
            callback(val); //call the callback with the value
        }
    });
}

Thanks, Arun, that's close, but will this assign the retrieved text string to the variable 'my_zone'? I want to be able to use this variable in other places in the code. Thx. — user1399233, Jan 10 '14 at 16:30
@user1399233 that might not work as you expect because we cann't predict when the value will be returned... you can read [this answer](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) for more details — Arun P Johny, Jan 10 '14 at 16:31

Trying to use a callback with .ajax call to assign value to a variable

1 Answers1