Question

I want to show the weather on my website. I have some javascript code like

$(function () {

    // Specify the ZIP/location code and units (f or c)
    //var loc = '10001'; // or e.g. SPXX0050
    //var u = 'f';

    var loc = 'TUXX0002';
    //var loc = 'TUXX0014';
    var u = 'c';
    //var locA = 'TUXX0002';
    //var locI = 'TUXX0015';


    var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
    var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
    var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;

    window['wxCallback'] = function (data) {
        var info = data.query.results.channel.item.condition;
        $('#wxIcon').css({
            backgroundPosition: '-' + (61 * info.code) + 'px 0'
        }).attr({
            title: info.text
        });
        $('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
        $('#wxTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
    };

    $.ajax({
        url: url,
        dataType: 'jsonp',
        cache: true,
        jsonpCallback: 'wxCallback'
    });

});

For now it shows only one location. (with loc variable). I want to add a dropdown or something like a change location link. Than if user selects ‘A’ location it shows ‘A location’s weather’ etc. I added a dropdown item. Here is the code.

<select id="wxCombo">
   <option value="istanbul">istanbul</option>
   <option value="ankara">ankara</option>
   <option value="izmir">izmir</option>     
</select>

Than I add some javascript code for change function, on the same javascript page.

var wxCombo = $("#wxCombo").val(); 
    $("#wxCombo").change(function() 
    { 
        if (wxCombo == 'Ankara')
        {
            loc 'TUXX0002';     
        }
    });

It didn’t worked. I need some guide for fixing this issue.

Answer 1

Here’s a few things I would change.

First off, declare a function that will update the weather information, based on location:

function updateWeather(loc, u)
{
    var query = "SELECT item.condition \
        FROM weather.forecast \
        WHERE location='" + loc + "' AND u='" + u + "'",
    url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json';

    $.ajax({
        url: url,
        dataType: 'jsonp', // this automatically disables cache too
        success: function(data) {
            var info = data.query.results.channel.item.condition;
            $('#wxIcon').css({
                backgroundPosition: '-' + (61 * info.code) + 'px 0'
            }).attr({
                title: info.text
            });
            $('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
            $('#wxTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
        }
    });
}

Then, hook this into the .change() handler:

$("#wxCombo").change(function() { 
    var country = $(this).val();

    if (country == 'ankara') {
        updateWeather('TUXX0002', 'C');
    }
    // etc.
});

Demo: http://jsfiddle.net/ZF3aW/