Show the local weather ajax problem

I’ve read a whole mess of posts on this topic, but I’m still having a problem. I wrote the project on Sublime first and everything works fine. I tried putting it on codepen however and the ajax call doesn’t work. It triggers the error instead of success. What could I be getting wrong?

Here is my stuff:
Stuff

Looking in the Chrome console, I see that you’re getting a “mixed content” message. You’re trying to call openweathermap from your https codepen. Bad coder! The problem (in my limited understanding) is that openweathermap doesn’t accept calls from https. You could use your pen on http, but then (as I understand it) navigator.geolocation.getCurrentPosition won’t work because it doesn’t like http. (I know, makes me want to scratch my eyes out too.)

So, you either have to change everything to http or https. You can get your coords on http on ip-api.com or I think Dark Sky API works on https if you want.

I chose the former route:

  $.getJSON("http://ip-api.com/json", function (data) {
    lat = data.lat;
    lon = data.lon;

    /*
     * more code
     */

If you call your codepen over http, that should work.

I’m sure there is a better solution, but it’s late and I wasn’t sure if you were going to get an answer tonight. I have an image of you shivering in your underwear staring at the screen with bloodshot eyes, waiting for a response. I know I’ve been there.

This seems to work:

function use_api(lat, lon){
    var api_key = '8a7759132e2cad3a28a84ec1abf616fd';
    $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&APPID=' + api_key,
        success: function(data){
            display_info(data);
        }, //end of success function
        error: function(data){
          console.log(data);
        }  //end of error function
    })  //end of ajax
};  //end of use_api

$(document).ready(function(){
 
    $.getJSON("http://ip-api.com/json", function (data) {
      use_api(data.lat, data.lon);
    });

});

Just remember to change your codepen url to http in the address bar.

Yeah, APIs drive me crazy too.

You made me laugh! Killer response, thanks. I got the different coordinates running alright with your method, although that’s not the route I want to take. I looked at the dark sky api and I reckon I’ll use that instead. I’m not up to figuring out another API right now though, so I’m going to take my blood shot eyes to bed. Thanks for your response, I really appreciate it.