Why Blocked loading mixed active content?
<p>Today I spotted the error </p>

<p><code>Blocked loading mixed active content "http://ip-api.com/json/?callback=jQuery2240797948164524662_1471014635124&amp;_=1471014635125"</code></p>

<p>in firefox. </p>

<p>Here is my code </p>

<pre><code>function getCurrentWeather(){
  $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
      var lat=data["lat"];
      var lon=data["lon"];
      updateWeatherDisplay(lat,lon);         
      updateAddress(data["city"],", "+data["region"]);
    });
}
</code></pre>

<p>But here is the other code, that makes equivalent query to the api - with no errors!:</p>

<pre><code>function getLocation() {
    $.get('http://ip-api.com/json', function(loc) {
        $('#location').text(loc.city + ', ' + loc.region + ', ' + loc.country);
        getWeather(loc.lat, loc.lon, loc.countryCode);
    })
    .fail(function(err) {
        getWeather();
    });
}
</code></pre>

<p>Both examples runs on <a href="https://codepen" rel="nofollow">https://codepen</a> io.</p>

<p>I already know that I should use https:// to call to api.
But I am curious, why no errors in the second example?</p>