Search code examples
javascriptjqueryhtmlyahoo-weather-api

jquery simpleweather not recognized

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>
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