CODEWITHSUNDEEP
jqueryweather
tinthetub
tinthetub

Reputation: 2196

JQuery simpleWeather Issue

I've been messing with this plugin: http://jsfiddle.net/a4hbL/2064/

I'm trying to display text with JQuery every time a condition is met: if it's sunny outside print "It's Sunny", if it's snowing print "It's Snowing" and etc...

I've tried: 

if(weather.tomorrow.code === 32) {
        $("#weather").html('<h1>It is Sunny!</h1>');
    }
    else if {
         ... // rest of the possible outputs.

But nothing worked (see http://developer.yahoo.com/weather/#codes for weather codes). I keep getting various errors in the console like weather is undefined or cannot read property of code.

Here's where I've added it: http://jsfiddle.net/LEJbT/2/

Help is kindly appreciated. I've been stuck without a fix for awhile...

Thanks!

Upvotes: 2

Views: 974

Answers (2)

Chen-Tsu Lin
Chen-Tsu Lin

Reputation: 23244

For 'weather is undefined' error

You can check ajax success or not by check success function

success: function(weather) { 
    console.log(weather);
},

And For 'cannot read property of code' error

You can check the value of weather.tomorrow

success: function(weather) { 
    console.log(weather.tomorrow);
},

Upvotes: 0

AndiPower
AndiPower

Reputation: 853

See, it works: http://jsfiddle.net/Q2Y6s/

You have to put your code in the success-part:

$(document).ready(function () {
    $.simpleWeather({
        zipcode: '',
        woeid: '2357536',
        location: '',
        unit: 'f',

        success: function (weather) {
            html = '<h2>' + weather.tomorrow.high + '&deg;' + weather.units.temp + '</h2>';
            html += '<ul><li>' + weather.city + ', ' + weather.region + '</li>';
            html += '<li class="currently">' + weather.tomorrow.forecast + '</li>';
            html += '<li>' + weather.tomorrow.highAlt + '&deg;C</li></ul>';

            $("#weather").html(html);
/************************** your code HAS TO BE here ************************/
    if(weather.tomorrow.code > 16) {
        $("#weather").html('<h1>Alert: Freezing Rain!</h1>');
    }
    else {
         $("#weather").html('<h1>Alert: Freezing Rain!</h1>');
    }


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

/************************** your code was here ************************/

});

Upvotes: 2

Related Questions