Load content from website into an attribute

Question

I need to update the href of a link (#product_buy) with a URL that can be found on another page inside the #product_buy_source div. Here's the jQuery.

$('body').ready(function(){

    $('#product_buy').attr('href', function(){
        $(this).load('http://cdn.jeremyblaze.com/theme_info.html #Altitude .product_buy_source');
    });

});

And here's the link that needs to be edited.

<a href="#" id="product_buy">Purchase</a>

I sense the jQuery I've used is completely wrong. Is anybody able to make it work? Here's a little fiddle

Answer 1

.load() loads data as the HTML of the element it is called on. To use .load() (so that you could specify a selector along) for setting the href, you will need to to something like:

// load it into a temp element, and assign the href once it is loaded
$('<div/>').load('http://cdn.jeremyblaze.com/theme_info.html #Altitude .product_buy_source', function() {
    $('#product_buy').attr('href', $(this).text());
});

Or, in a more straightforward manner like:

$.get('http://cdn.jeremyblaze.com/theme_info.html', function(data) {
    $('#product_buy').attr('href', $(data).find('#Altitude .product_buy_source').text());
});