Access jQuery variable outside its function

Question

I need to use a variable outside its function. I already read older questions, but I still can't find a proper solution.

Here's the code:

<script>

var warehouseAddress;

$(document).ready(function(){

$.ajax({
    type:"POST",
    url:"${pageContext.request.contextPath}/users/findWarehouseAddress",  
    success:function(data){
        warehouseAddress = data;
    }
}); 

alert(warehouseAddress);

});

var warehouse = warehouseAddress;

</script>

The alert gives me "undefined". I need to get that variable not only inside the alert, but also inside the other "warehouse" value that is outside the ready function.

Sorry if it's a duplicate, but as I said I couldn't make it with the answers I read.

EDIT: For the sake of completeness I describe the details, replacing the alerts with the read functions I have to call.

As I said in comments, I'm actually using Google Maps APIs and their functions. What I have to do is passing the variable outside the $(document).ready function, because I need to use it in an external script.

The problem is that the external js function that I have to call is a Google Maps function (initialize()) that loads as the window loads, so I have to find a way to call that function after the $ready function.

AJAX is asynchronous so the alert and the var warehouse = warehouseLat are executed earlier than the AJAX success method. And your var warehouse = ... is also outside the document ready which is giving even more problems. Can you not call your final function within the success method of AJAX? — putvande
– putvande, Commented Aug 8, 2013 at 8:45

Jake Aitchison · Accepted Answer · 2013-08-08 08:57:10Z

2

as @putvande already said ajax is asynchronous, so the best thing to do here is take advantage of callbacks ( event based :D )

$.ajax({
    type:"POST",
    url:"${pageContext.request.contextPath}/users/findWarehouseLat",  
    success: myDataHandler(data)
}); 

function myDataHandler(data){
    warehouseLat = data;
    //do something with the data here :D as it now exists
    alert(warehouseLat);
}

Have a look at this: custom events in jquery

edited Aug 8, 2013 at 8:57

answered Aug 8, 2013 at 8:51

Jake Aitchison

1,1096 silver badges20 bronze badges

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

6 Comments

Kurt Bourbaki Over a year ago

Ok, I put the alert in the callback and it works. What I have to do now is to pass the variable outside the $ready function, because I need to use it in an external script. Any suggestions?

Jake Aitchison Over a year ago

remember this is event based, so in order to do that just call the external function from the callback that way the external function will have access to the data, if you want to store the data to be used later you could always create a gobal variable (not really recommended) and save the data to that variable then it will be accessible to any function that requires this data as long as the external function doesnt try and use the global variable before its been assigned the data.

Somnath Kharat Over a year ago

@KurtBourbaki just declare var warehouseLat; outside the $ready and assign the value to warehouseLat as given in this ans .i think u want the the same

Kurt Bourbaki Over a year ago

@milkshake This thing is getting more difficult. I put my variables in the global scope with window.warehouseLat. The problem is that the external js function that I have to call is a Google Maps function that loads as the window loads, so I have to find a way to call that function after the $ready function :)

Jake Aitchison Over a year ago

@KurtBourbaki it might be worth adding your own answer in that case and marking it as the answer so other people can see how you overcame this.

|

Suresh Atta · Accepted Answer · 2013-08-08 08:45:59Z

1

That is what asynchronous means.

Before completing the ajax request,you are alerting your warehouseLat.

You should do it after the request completed successfully !!

   $.ajax({
        type:"POST",
        url:"${pageContext.request.contextPath}/users/findWarehouseLat",  
        success:function(data){
            warehouseLat = data;
           alert(warehouseLat);
        }
    });

answered Aug 8, 2013 at 8:45

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

Kurt Bourbaki · Accepted Answer · 2013-08-09 18:07:11Z

Here's the solution I found thanks to @milkshake and other kind users comments.

First of all, I put all my Google Maps scripts in an external .js file. I needed to do so for code readability.

In that file, I simply used the Google Api's addDomListener function to load what I needed at the right time, to avoid timing errors between ajax calls and methods executions.

google.maps.event.addDomListener(window, 'load', function(){

    $.ajax({
        type:"POST",
        url:contextPath+"/products/findWarehouseAddress",  
        success:function(data){
                    warehouseAddress = data;
                    geocoder.geocode({'address': warehouseAddress }, function(results) {
                        warehouse = results[0].geometry.location;
                        initialize();
                    });
        }
    });
});

So the timing is something like this:

Google Listener;
Ajax call returns the warehouse address;
When I get the warehouse address, I store it in warehouseAddress variable and I geocode it (extracting coordinates from the address String);
I call Google Maps initialize function, so that my variables can be used by it.

It works. But there could be better ways to do that, so I'll be glad to read your comments if you've got better solutions :)

Collectives™ on Stack Overflow

Access jQuery variable outside its function

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related