jquery simpleweather not recognized

StackOverflow https://stackoverflow.com/questions/21989343

Question

I want to show weather on my web site using simpleweatherjs, but it is not working for me. Can somebody tell me what I'm doing wrong? Page is blank. If I, for example before line $.simpleWeather({...}); put $("#weather").html("test"), then this sentence work, but it is not working under $.simpleWeather({...}); like it is shown in example.

Here is my html:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Weather</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/2.5.0/jquery.simpleWeather.min.js"></script>
</head>
<body>

<div id="weather"></div>
<script>
// Docs at http://simpleweatherjs.com
$(document).ready(function() {
  $.simpleWeather({
    location: 'Austin, TX',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

</script>
</body>
Was it helpful?

Solution

Are you running the code from a local file? i.e. navigating to c:\html\test.html (or equivalent) in the browser.

It doesn't appear to work when doing this for me either, however when I hosted the HTML file on a webserver (I used tomcat) and navigated to http://localhost:8080/html/test/html it worked.

Edit: This would explain why it works fine on JS Fiddle as well

OTHER TIPS

try to clear your line:

 <link rel="stylesheet" type="text/css" href="style.css">

maybe there is something set hidden in there.

or/and change the line: (if you are local)

//query.yahooapis.com/v1/public/yql

to

  http://query.yahooapis.com/v1/public/yql

Console error says that it is not able to load 

   //query.yahooapis.com/v1/public/yql.....

Hence prefix the url with http or https like 

    https://query.yahooapis.com/v1/public/yql.....
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top