Local Open Weather Map and jQuery selector/actions

I’m stuck trying to pass the data to the document. Not sure which jQuery method/syntax is screwed up: I get user lat/long data, I also get the openweathermap api data, but can’t get it to pass the data to the body elements. I’ve tried several w3s jQuery walk-throughs and examples but not sure where I’m screwing this up. o.0

<!-- NO COPYRIGHT CLAIMED -->

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
    var OWM_API_KEY = "abcdefghijklmnopqrstuvwxyz123456"; //<--- fake key, use your own ;)
    		       	
    // get users lat/long
    
    var getPosition = {
      enableHighAccuracy: false,
      timeout: 9000,
      maximumAge: 0
    };
    
    function success(gotPosition) {
      var uLat = gotPosition.coords.latitude;
      var uLon = gotPosition.coords.longitude;
      console.log(`${uLat}`, `${uLon}`);
    
      // now put the users lat/long into the OpenWeatherMap API Query
      var localWeather;
    
      $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + uLat + '&lon=' + uLon + '&appid=' + OWM_API_KEY + '&units=imperial',
        function(weatherData) {
          console.log(weatherData);
          var userLocation = weatherData.name;
          var userCountry = weatherData.sys[0].country;
    
          // setup vars to pass to html doc
    
          $("#userLocation").text(userLocation);
          $("#userCountry").html(userCountry);
    
        })
    
    };
    
    function error(err) {
      console.warn(`ERROR(${err.code}): ${err.message}`);
    };
    
    navigator.geolocation.getCurrentPosition(success, error, getPosition);
    });
  </script>
</head>

<body>
  <div>
    <div>
      <h1 id="userLocation">Getting location...</h1>
    </div>
  </div>
</body>

Hi @EgoDominusVos

Your code is putting the data into the following 2 elements:

$("#userLocation").text(userLocation);
$("#userCountry").html(userCountry);

However, in your html these elements don’t exist.

  <div>
    <div>
      <h1 id="userLocation">Getting location...</h1>
    </div>
  </div>

You need to add some elements with those ids so that jQuery can insert the data in the correctly.

1 Like

it only works with legacy js libs … the newer <1yr do not work …

I did an entire copypasta with another campers FUNCTIONING code and only changed the js libs to a newer version and it broke …

1 Like

I’ve also started fresh and coded only in html window within codepen not using the css or js window, and referenced the legacy js libs in the head tag and it works, but pull it out and seperate everything and use the codepen settings menu and no dice … I’ve switched from MSedge browser to FireFox to Safari and nada across the board, this is a NIGHTMARE challenge.

1 Like

Okay kiddos,

I pulled all my Local Weather App code outta CodePen.

Opened Sublime Text 3 and copypasta’d the whole shebangs into one index.html file , linking jQuery and jQueryUI libs in script tags, then opened the file in a mozilla browser tab …

BOOM BABY … that’s right CODEPEN SUX …

4 days of KNOWING MY CODE WAS DONE RIGHT …

1 Like