Passing a URL around Jquery & Ajax as a variable

Question

I have a bunch of links that I want to load dynamically within the page. Instead of writing out a massive statement for every link I want to grab the URL from the attribute and pass it where I need it.

The code below works if I put an address instead of the variable name linkURL so I know the code works. Firebug shows it looks for the right URL at first but when it gets to the

.load('linkURL .columnWide');

section it starts looking for linkURL

// AJAXin links

// Click on link within id with ending of ASPX triggers this
$('#element a[href$=aspx]').click(function(e) {

    // Grab the href attribute and use it as linkURL variable
    var linkURL = $(this).attr('href');
    // AJAX
    $.ajax({

    // Use the variable linkURL as source for AJAX request
    url: linkURL,
    dataType: 'html',

    success: function(data) {
        // This is where the fetched content will go
        $('.result1')
            // HTML added to DIV while content loads
            .html('<div id="spinningLoader"><img class="loader" src="spinnerBlack.png" alt="spinnerBlack" width="100" height="100" /></div> ')
            // Load from this URL this class
            .load('linkURL .columnWide');

        // See above
        $('.result2')
            .html('<div id="spinningLoader"><img class="loader" src="spinnerBlack.png" alt="spinnerBlack" width="100" height="100" /></div> ')
            .load('linkURL .columnNarrow');

        // It worked mother flipper
        $.print('Load was performed.');
    }
    });
});

EDIT: I probably shouldn't publish links to things in my s3 buckets :s

Answer 1

You need to modify you load lines thus .load(linkURL + ' .columnWide')