Load content of a div on another page

Question

You will see from this code that it loads the content URL from the hash tag. Is there anyway to load only a single div element from that external page.

$(function() {
    if(location.hash) $("#content_inload").load(location.hash.substring(1)); 
    $("#nav a").click(function() {
            $("#content_inload").load(this.hash.substring(1));
    });
});

so something like after .substring(#inload_content(1))

but that does not work.

Thanks

Solution 1

You just need to add a jquery selector after the url.

See: http://api.jquery.com/load/

Example straight from the API:

$('#result').load('ajax/test.html #container');

So what that does is it loads the #container element from the specified url.

Solution 2

Yes, see "Loading Page Fragments" on http://api.jquery.com/load/.

In short, you add the selector after the URL. For example:

$('#result').load('ajax/test.html #container');

Comments

[Admin]

Please note that the div in the other page may not be created with JavaScript.

[RIK]

OK thanks very much however what do we do in this situation whereby rather than have an exacting URL we have this.hash.substring . Obviously it would not work to have this.hash.substring '#container' so how would one do it $("#content_inload").load(this.hash.substring(1));

[Radu]

@Robin Knight $("#content_inload").load('this.hash.substring(1) #container'); should work

[RIK]

Unfortunately not. Because the this.hash.substring is not incased in parenthesis it cannot function. It would be something along the lines of this.hash.substring(1) '#container' but that does not work so presumably something else is needed. Any Ideas?

[Radu]

@Robin Knight try: this.hash.substring(1) + ' #container'

[RIK]

Marvellous. The load script however is not loading the XFBML Like Button. Any idea how to get that working too. Sample at divethegap.com/update/events

[Radu]

@Robin Knight I would make a new question for that, make sure you're specific about what resource isn't loading - I couldn't tell just by looking at the code.

[Matias Seguel]

is there an approach on Vanilla Javascript?