Currently, when I load some content with jQuery Ajax. This loads the entire page and return only my content. The problem is I don't want to load the entire page. I just want to load this content of this page without load the entire page.
$('#single').load(href+' #single-content', function() {
});
This function loads entire href
page and returns #single-content
.
Is it possible to that ?
It is NOT possible to only load a small part of a page and then return that small part. This is because the request cannot know where the "#single-content
" is located in the page if it has not loaded the page entirely and if it is located in the page at all.
If you only want to load your "#single-content
" for performance reason I suggest you create a new page where you load the content from which only contains your "#single-content
"
What is your language of choice on the web server? Your work will have to be at that level. So if you're using PHP you have to modify your page logic so that discreet portions of content can be returned instead of the entire page.
The ideal way to do this is to create templates on the server side. You will have a master template that includes the entire HTML page and then includes the relevant content in it. Then you'll have smaller view files for each page in your site. This will allow you to have logic in your server side language that can choose to return the entire page using the template with the included page content or just return the page content without the outer master template.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Projects:</b>
<ol id="new-projects"></ol>
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
</body>
</html>
This code does what you want, it's from the offical jQuery doc http://api.jquery.com/load/ (first example) and you can load and get a part of another page (on same domain) like here http://api.jquery.com/resources/load.html
</div>