I keep getting this error at referring to 'url' in this block of code.

Uncaught ReferenceError: url is not defined.

Although the URL is defined clearly in a variable above the ajax. What am I doing wrong?

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

Here is the full code

<script type="text/javascript" src=".6.1/jquery.min.js"></script>


<script type="text/javascript" language="javascript">

$(function () {
// Specify the location code and units (f or c)
var location = 'SPXX0550';
var u = 'c';


// Run the query (pull data from rss feed)
var query = 'SELECT * FROM rss WHERE url="/' + location + '_' + u + '.xml"';
var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
var url = '=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;
});

window['wCallback_1'] = function(data) {
    var info = data.query.results.item.forecast[0];
    $('#wIcon').append('<img src="/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
    $('#wTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
    $('#wText').html(info.text);
};

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

I keep getting this error at referring to 'url' in this block of code.

Uncaught ReferenceError: url is not defined.

Although the URL is defined clearly in a variable above the ajax. What am I doing wrong?

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

Here is the full code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


<script type="text/javascript" language="javascript">

$(function () {
// Specify the location code and units (f or c)
var location = 'SPXX0550';
var u = 'c';


// Run the query (pull data from rss feed)
var query = 'SELECT * FROM rss WHERE url="http://xml.weather.yahoo.com/forecastrss/' + location + '_' + u + '.xml"';
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['wCallback_1'] = function(data) {
    var info = data.query.results.item.forecast[0];
    $('#wIcon').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
    $('#wTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
    $('#wText').html(info.text);
};

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

• javascript
• ajax
• jquery

• You have your ajax call outside of the scope of your ready function. So the ajax call attempts to execute before the document is ready, rendering the url variable as undefined, being that it is compiled at the execution of the document ready state. – Ohgodwhy Commented Feb 21, 2013 at 21:40
• url is local to the ready callback. Why don't you put all your code inside the callback? And additionally, at the moment you execute $.ajax, the ready callback wasn't called yet. – Felix Kling Commented Feb 21, 2013 at 21:41

3 Answers 3

Because you define and populate url in the block of code surrounded by $(function() { }), that runs when the document is loaded.

However, the code following it (where you try to use url) is run immediately (before the document has loaded).

Just put all the code inside the $(function() { }) block and it will work fine...

$(function () {
    // Specify the location code and units (f or c)
    var location = 'SPXX0550';
    var u = 'c';


    // Run the query (pull data from rss feed)
    var query = 'SELECT * FROM rss WHERE url="http://xml.weather.yahoo.com/forecastrss/' + location + '_' + u + '.xml"';
    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['wCallback_1'] = function(data) {
        var info = data.query.results.item.forecast[0];
        $('#wIcon').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
        $('#wTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
        $('#wText').html(info.text);
    };

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

Your url is outside of the scope of your $.ajax call. You need to move it inside the ready handler, or make url available as a global

$(function () {
    // Specify the location code and units (f or c)
    var location = 'SPXX0550';
    var u = 'c';


    // Run the query (pull data from rss feed)
    var query = 'SELECT * FROM rss WHERE url="http://xml.weather.yahoo.com/forecastrss/' + location + '_' + u + '.xml"';
    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;

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

window['wCallback_1'] = function(data) {
    var info = data.query.results.item.forecast[0];
    $('#wIcon').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
    $('#wTemp').html(info.temp + '&deg;' + (u.toUpperCase()));
    $('#wText').html(info.text);
};

Your url is defined inside a function so it is bound to that execution context (scope). You need the $.ajax call to be in the same execution context. If you move it into the function, then it will work.