How to work out why the following jQuery code is not working?

Question

$(document).ready(function(){
    var long1;
    var lat;
    var ftemp;
    var ctemp;
    var ktemp;
    $.getJSON("http://ip-api.com/json",function(data2){
        lat=data2.lat;
         long1=data2.lon;
         var api='http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long1+'&appid=46fdba69aa7710295a227debc481af55';
        $.getJSON(api,function(data){
            var weatherType=data.weather[0].description;
            ktemp=data.main.temp;
            var windspeed=data.wind.speed;
            var city=data.name;
            var tempswap=true;
            ftemp=((ktemp)*(9/5)-459.67).toFixed(2);//temp in fahrenheit
            ctemp=(ktemp-273).toFixed(2);//temp in calcius
            console.log(city);
            $("#city").html(city);
            $("#weatherType").html(weatherType);
            $("#ftemp").html(ftemp);
            $("#ftemp").click(function(){
                if(tempswap===false){
                    $("#ftemp").html(ftemp+" &#8457 ;");
                    tempswap=true;
                }else{
                    $("#ftemp").html(ctemp+" &#8451 ;");
                    tempswap=false;
                }
            });
            windspeed =(2.237*(windspeed)).toFixed(1);
            $("#windspeed").html(windspeed + " mph");
            if(ftemp>80){

            }else if(ftemp>70){
                $('body').css('background-image','url()');
            }

        });

    });
});

I don't know what is wrong. I just can't get anything to work (even the console is not working).

You need to be more specific with what the actual problem is. What are you trying to do? — Ken, May 24 '17 at 17:05
Your code is returning an error in the console... Mixed Content: The page at 'https://codepen.io/manash23/pen/oWmKje?editors=1010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS. — Ken, May 24 '17 at 17:18

score 1 · Accepted Answer · answered May 24 '17 at 17:08

1

You have a problem with your endpoint.

first problem is you need to access it using https only not http. second after solving first one you are getting below error.

GET https://ip-api.com/json net::ERR_CONNECTION_REFUSED error.

answered May 24 '17 at 17:08

Dinesh undefined

5,490
2
19
40

hi,,thanks for pointing that out...bdw can u suggest me any other api to get my lat nd lon of my local region? – Manash23 May 24 '17 at 17:19
please refer this [link](https://stackoverflow.com/questions/3490622/get-latitude-and-longitude-based-on-location-name-with-google-autocomplete-api). accept the answer it it helped you – Dinesh undefined May 24 '17 at 17:31

Sivasankar · Answer 2 · 2017-05-24T17:23:12.093

0

The reason being stackoverflow.com is loaded with https and the request you are trying send via jQuery Ajax is blocked because requested API is http://ip-api.com/json.

http requests are blocked over https

edited May 24 '17 at 17:23

answered May 24 '17 at 17:18

Sivasankar

753
8
22

How to work out why the following jQuery code is not working?

2 Answers2