1

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

Alex H
  • 1,424
  • 1
  • 11
  • 25
Jeremy Blazé
  • 155
  • 1
  • 9
  • Have you set up the file on the other end to allow cross-domain requests? – JJJ Aug 15 '13 at 09:45
  • @Juhana It's on my domain so it shouldn't matter should it? – Jeremy Blazé Aug 15 '13 at 09:45
  • Unless this file is also on cdn.jeremyblaze.com it does matter. The subdomain must match as well. – JJJ Aug 15 '13 at 09:46
  • @Juhana Are you able to point me to a tutorial on how to do this? However I _am_ able to successfully load simple content to a div, so I think it _does_ work. – Jeremy Blazé Aug 15 '13 at 09:48
  • [JQuery ajax cross domain](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) – JJJ Aug 15 '13 at 09:49
  • @Juhana I think I've sorted this out but my code is still not working. Do you have any advice? Or know how to fix it? – Jeremy Blazé Aug 15 '13 at 09:57
  • 1
    I don't know what you're trying to do. Why do you have two ids inside the load string? – JJJ Aug 15 '13 at 09:59
  • Are you passing 'Altitude' as the product name? If not, it won't work as there is the file contains just that one product. Also, your usage of ids looks incorrect. Replace with classes. – techfoobar Aug 15 '13 at 10:00
  • It's because the `#product_buy_source` appears numerous times on the page, but only once under the `product_name` (which in this case is 'Altitude'). But that isn't the problem because that works with a basic load to div. – Jeremy Blazé Aug 15 '13 at 10:01
  • @techfoobar Thanks for letting me know. I understand now. Do you have any advice on how to fix this? I actually posted a [question](http://stackoverflow.com/questions/18245280/load-child-from-external-page/18245404#18245404) about this earlier but got no answer that worked. – Jeremy Blazé Aug 15 '13 at 10:02
  • It is a problem, because ids should be unique. You can't have more than one id with the same name. Use classes instead as techfoobar says. – JJJ Aug 15 '13 at 10:03
  • @Juhana I've now replaced with classes – Jeremy Blazé Aug 15 '13 at 10:06
  • I've now also edited the question to make it simpler to understand what I'm trying to accomplish. – Jeremy Blazé Aug 15 '13 at 10:08

1 Answers1

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());
});
techfoobar
  • 65,616
  • 14
  • 114
  • 135