HTML/Javascript Code works in JSbin but not codepen, plunker, or jsfiddle

Question

The following code works in JSbin but not when I copy and paste it directly into codepen, plunker, or jsfiddle.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>


<script>
  function getWeather(){

  var ipCall = 'http://ip-api.com/json';
  $.getJSON(ipCall, locationCallBack)

  function locationCallBack(locationData){
    var lat =locationData.lat; 
    var lon = locationData.lon;

    var apiCall = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&units=imperial&appid=34e8aa0c1d8d15a560df7a7093711071';

    $.getJSON(apiCall, weatherCallBack)
  }



  function weatherCallBack(weatherData){
  var cityName = weatherData.name;
  var cityTemp = weatherData.main.temp;
  var weatherType = weatherData.weather[0].main;
  var weatherIcon = weatherData.weather[0].icon;  

  $('.cityName').append(cityName);
  $('.cityTemp').append(cityTemp);
  $('.weatherType').append(weatherType +' '+ weatherIcon);  
    }

  }
getWeather()
</script> 

<div class ="cityName">


</div>

<div class="cityTemp">

</div>

<div class="weatherType">

</div>

</body>
</html>

The code shows the user location, and weather information for that location. Uses api to get geolocation data and weather info.

works in plunker for me http://plnkr.co/edit/gFsOogp7Jc0kqPrqex1X?p=preview — charlietfl, Jun 18 '17 at 22:50

score 1 · Answer 1 · answered Jun 19 '17 at 03:37

If you check on your browser's console you'll see an error like:

jquery.min.js:4 Mixed Content: The page at [CODEPEN/JSFIDDLE URL] 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.

That's happening because Codepen and JsFiddle only allow HTTPS requests and both of the APIs you're using doesn't have an HTTPS protocol.

Read more about it here: https://blog.codepen.io/2017/03/31/codepen-going-https/

That's a good point and it's the way to go. Security first is a strong point that I like on these bins. +1 — Dinca Adrian, Sep 04 '17 at 08:01

HTML/Javascript Code works in JSbin but not codepen, plunker, or jsfiddle

1 Answers1