Passing a variable from a callback function to another function?

Question

I am working on setting up an HTML5 GeoLocation script and I would like to store the zip code in a cookie but for now I am just trying to figure out how to pass the zip code variable into another function.

Here is my script to reverse geo-code based on lat/long:

function retrieve_zip(callback)
{
    try { if(!google) { google = 0; } } catch(err) { google = 0; } // Stupid Exceptions
    if(navigator.geolocation) // FireFox/HTML5 GeoLocation
    {
        navigator.geolocation.getCurrentPosition(function(position)
        {
            zip_from_latlng(position.coords.latitude,position.coords.longitude,callback);
        });
    }
    else if(google && google.gears) // Google Gears GeoLocation
    {
        var geloc = google.gears.factory.create('beta.geolocation');
        geloc.getPermission();
        geloc.getCurrentPosition(function(position)
        {
            zip_from_latlng(position.latitude,position.longitude,callback);
        },function(err){});
    }
}
function zip_from_latlng(latitude,longitude,callback)
{
    // Setup the Script using Geonames.org's WebService
        var script = document.createElement("script");
        script.src = "http://ws.geonames.org/findNearbyPostalCodesJSON?lat=" + latitude + "&lng=" + longitude + "&callback=" + callback;
        console.log(script.src);
    // Run the Script
        document.getElementsByTagName("head")[0].appendChild(script);
}
function callback(json)
{
    zip = json.postalCodes[0].postalCode;
    country = json.postalCodes[0].countryCode;
    state = json.postalCodes[0].adminName1;
    county = json.postalCodes[0].adminName2;
    place = json.postalCodes[0].placeName;
    alert(zip);
}
$('#findLocation').click(function(event) {
    event.preventDefault();
    console.log(zip); // This is giving me undefined currently
});

So basically, in the callback function, I want to store the zip code as a variable(rather than displaying it in an alert) and then in the on click function at the bottom, I want to be able to display the zip code that was stored in the previous callback function.

Any help greatly appreciated, still pretty new to Javscript/jQuery, thanks!

dSquared · Accepted Answer · 2014-04-30 21:35:02Z

1

You could set zip as a 'global' variable by including it outside of the function at the top of the document like so:

var zip;
...

Alternatively, you may consider defining an object at the 'global' level and using it as a namespace to store variables like so:

window.address = {};

function callback(json){
    address.zip = json.postalCodes[0].postalCode;
    address.country = json.postalCodes[0].countryCode;
    address.state = json.postalCodes[0].adminName1;
    address.county = json.postalCodes[0].adminName2;
    address.place = json.postalCodes[0].placeName;
}

$('#findLocation').click(function(event) {
    event.preventDefault();

    console.log(address.address);
    console.log(address.zip);
    ...
});

I hope this helps!

edited Apr 30, 2014 at 21:35

answered Apr 30, 2014 at 21:29

dSquared

9,8455 gold badges40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user13286 Over a year ago

Thank you, your alternate solution is working great. I appreciate it! Will accept in 2 mins.

DRAX · Accepted Answer · 2014-04-30 21:28:52Z

1

Define var zip at very begining of code. You haven't defined it.

I haven't tried, but it should solve your problem.

Also, it seems that you forgot to define other variables in callback function as well.

answered Apr 30, 2014 at 21:28

DRAX

32.8k2 gold badges28 silver badges30 bronze badges

1 Comment

user13286 Over a year ago

Thank you, simple fix :)

user2875131 · Accepted Answer · 2014-05-01 21:05:03Z

What I would do, is to avoid the anonymous function in the event handler, that is, create a new named function -which gives you the added benefit of traceability during debugging- and then use that function as the event handler callback:

function eventHandlerFunction(event) {
  var zip;
  event.preventDefault();

  zip = eventHandlerFunction.zip;
  console.log(zip);
}

function callback(json) {
  var zip;
  zip = doSomethingWithJsonToGetTheZip();
  eventHandlerFunction.zip = zip;
}

$("#findLocation").click(eventHandlerFunction);

Or, better yet, code this as a module and then you have member encapsulation and you can share variables amongst functions without modifying the global object. You never know when another library will modify the same global member that you are using.

   var yourModule = (function($) {
      var zip;

      function retrieveZip(callback) {
        // your code
      }

      function callback(json) {
        // do something with json
        zip = json.zip; // or whatever
      }

      $("#findLocation").click(function(event) {
         event.preventDefault();
         console.log(zip);  // zip is visible in the parent scope + this scope
      });
   }(jQuery));

Collectives™ on Stack Overflow

Passing a variable from a callback function to another function?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related