Question

I want to dynamically load content using jquery’s .load() function. Im storing the links in the .rel attribute of the links. I’ve got it setup like this:

<script>
$(document).ready(function(){

$('.sidebar_link').click(function(){

    var link = this.attr('rel');
    event.preventDefault();
    $('#content').empty();
    $('#content').load(link '#content');

});
});
</script>

<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div> 

Its not working – It doesn’t seem to be grabbing the link out of the rel attribute and Im not sure why. Any ideas?

Answer 1

Try this:

var link = $(this).attr('rel');

.attr is not a native JavaScript function, it is from jQuery so you have to wrap this with jQuery

And this:

$('#content').load(link);

You can pass an id for loading fragments, however the url and the id need to be a string literal like so $('#content').load('photos.htm #content') The photos.htm page would need to have an element on the page with id content. If you just want to display the entire contents of the page, just use the url.