$.ajax call does not identify dynamic variable in its url

Question

I am currently working on a website that displays the current weather in your location. I am using the API https://openweathermap.org/current#geo provided by freecodecamp. I made an .ajax() call however my url has to dynamic according to the user's url. However, the .ajax() call does not recognize the variables. What am I doing wrong?

//jQuery is active
 $(document).ready(function(){
  //latitude and longitude found
 if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
    var userLon=position.coords.longitude;
    var userLat=position.coords.latitude;
    console.log(userLon);
    console.log(userLat);
  });
 };//navigation bracket

 $.ajax({
      url:"api.openweathermap.org/data/2.5/weather?lat="+userLat+"&lon="+userLon,
      success:function(doc){
       //the weather is displayed on html
}
   });//ajax call bracket
 });//jQuery bracket

score 0 · Answer 1 · answered Apr 15 '17 at 08:58

Its an issue with the async request. Move the ajax call within the if condition

$(document).ready(function(){
  //latitude and longitude found
 if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
    var userLon=position.coords.longitude;
    var userLat=position.coords.latitude;
    console.log(userLon);
    console.log(userLat);

     $.ajax({
      url:"api.openweathermap.org/data/2.5/weather?lat="+userLat+"&lon="+userLon,
      success:function(doc){
       //the weather is displayed on html
      }
   });//ajax call bracket
  });
 };//navigation bracket


 });//jQuery bracket

$.ajax call does not identify dynamic variable in its url

1 Answers1