Question

Here is the portion of HTML in question as well Javascript related to it:

HTML first:

<div id="menu">
<ul>
<li><a href="content.html#diviwant">click</a></li>
</ul>
</div>

Javascript goes:

$("#menu a").click(function(){
var link=encodeURI($(this).attr("href"));
$("#divtobeloadedwith").load(link);
return false;
});

content.html structure:

<div id="wrapper">
<div id="diviwant">stuff</div>
<div id="dividontwant">stuff</div>
</div>

Upon clicking on link it loads all the content instead only specific div.

Answer 1

Fundamentally the problem is that you want two different things:

1. When running without Javascript, you want to use the link content.html#diviwant, as that will load the page content.html and then jump to the element with the ID diviwant.

2. When running with Javascript, you want to pass content.html #diviwant to jQuery’s load() method, as that tells jQuery to load only the fragment with the id diviwant from the target page.

I’d probably use content.html#diviwant as the link, as you’ve got, then interpret that in the jQuery like this:

$("#divtobeloadedwith").load(link.replace('#', ' #'));

…to add the necessary space for the load().