How to pass JQuery variable to a global one

Question

I'm trying to retrieve data from JQuery function and pass it into global variables to use with Google Maps. These variables have to stay global, otherwise Google Maps don't work with them. I manage to get all data that I need from AJAX url and it logs perfectly but only inside Jquery function. If I log it outside of it, it's undefined. Is there anyway to pass those values to global variables?

function displayMarkers() {    
    var latlng = new google.maps.LatLng(latitd, longtd);
    var name = titleName;
    createMarker(latlng, name);    
}  

var latitd;
var longtd;
var titleName;       

$(document).ready(function() {
    $('#earthquakes').click(function() {    
        getQuakes();
    });

    function getQuakes() {
        $.ajax({
            url: 'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterDate + '&endtime=' + displayDate,
            success: function(data) {
                console.log(data);
                $.each(data.features, function(key, val) {
                    var coord = val.geometry.coordinates;
                    locationD = {
                        latd: coord[0],
                        lngd: coord[1]
                    };
                    latitd = locationD.latd;
                    longtd = locationD.lngd;
                    titleName = val.properties.title;

                    console.log(latitd, longtd);
                    console.log(titleName);    
                });
            }    
        });    
    }    
});

Yes you are access it wrongly. You will get lat,long values only after ajax success. then and then you use those variables in another function — Parth Trivedi, Dec 07 '15 at 09:51
Thanks for voting me down, but none of "duplicate" questions are relevant to mine. — Nebular Dust, Dec 07 '15 at 11:08

score 1 · Accepted Answer · answered Dec 07 '15 at 09:53

Your code should be like this

var latitd;
var longtd;
var titleName;

$(document).ready(function () {
    $('#earthquakes').click(function () {
        getQuakes();
    });
});

function getQuakes() {
    $.ajax({
        url: 'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterDate + '&endtime=' + displayDate,
        success: function (data) {
            console.log(data);
            $.each(data.features, function (key, val) {
                var coord = val.geometry.coordinates;
                locationD = {
                    latd: coord[0],
                    lngd: coord[1]
                };
                latitd = locationD.latd;
                longtd = locationD.lngd;
                titleName = val.properties.title;

                console.log(latitd, longtd);
                console.log(titleName);

                //Call this function to display here after success ajax
                displayMarkers();
            });
        }
    });
}

function displayMarkers() {
    var latlng = new google.maps.LatLng(latitd, longtd);
    var name = titleName;
    createMarker(latlng, name);
}

Nope it sill doesn't pass those values outside of the Ajax function. It gives me "undefined" — Nebular Dust, Dec 07 '15 at 09:59
Please check displayMarkers(); function position. I changed that one. — Parth Trivedi, Dec 07 '15 at 11:19

score -1 · Answer 2 · edited Dec 04 '19 at 23:17

-1

Add an async:false to your ajax request.

edited Dec 04 '19 at 23:17

Baum mit Augen

49,044
25
144
182

answered Dec 07 '15 at 10:03

andrew laurien Socia

1
2

Doesn't really change anything. I added it after url: line – Nebular Dust Dec 07 '15 at 10:07
if it's not working you can pass the latlang as a parameter to your displayMarkers. – andrew laurien Socia Dec 07 '15 at 10:15

How to pass JQuery variable to a global one

2 Answers2

Linked