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>
Était-ce utile?

La 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

Autres conseils

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.....
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top