jQuery offers some really powerful functions and methods to utilize AJAX.
One that I’ve discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.
For instance, if you have the following code:
<div id="header">This is a header</div>
<div id="main">
<div id="content">This is my main content.</div>
<div id="sidebar">This is a sidebar</div>
</div>
<div id="footer">This is my footer</div>
If you want to retrieve just the content inside of the “content” div, you could do that. If you want to retrieve just the content inside of the “main” div, you could do that, too.
Let’s start by looking at the AJAX code you might use to return the entire set of code for the page.
For this example, let’s say that our page is called “test.html”. To retrieve that page using jQuery’s AJAX function, you would simply use some javascript similar to the following.
$.ajax({ url: 'test.html', dataType: 'html' });Of course, all that’s going to do is retrieve the HTML code.
It won’t do anything with it. If you want to perform actions with the code you retrieve, you need to use the “success” parameter of the AJAX method.
So, let’s say we just want to put the whole of the code we retrieved into our page somewhere. For this example, let’s say we want to output the code we retrieved into a div with the ID of “testDiv.”
$.ajax({ url: 'test.html', dataType: 'html', success: function(response) { $('#testDiv').html(response); } });The code above will take all of the code you retrieved with your AJAX query and will output it into the testDiv.
Now, let’s say you just want to output the content of our “content” div into the “testDiv.” That’s where the .find() method comes into play. In order to do that, you would use code similar to the following.
$.ajax({ url: 'test.html', dataType: 'html', success: function(response) { $('#testDiv').html(jQuery(response).find('#content').html()); } });Using that code, jQuery will automatically search for the HTML element with the ID of “content” and will parse the HTML code found within. It will then output that HTML into the element with the ID of “testDiv.”
You can find more information about the jQuery .ajax() method and the .find() method in the official jQuery documentation.
8 Responses
In our case (jQuery version 1.4.3 on Firefox 9.0.1), loading jQuery’s ajax success response html into a jQuery object not only did request the html content but also tries to fetch an image referenced in the html.
That is why we remove tags before loading the response data into the jQuery object.
A piece of example code:
Thanks Brother..It Works Fine..
Thank you so much for the perfect tutorial!
worked great!
Hi, Thank you for this tutorial. I have a question. What about a url like for example http://www.htmlcenter.com/blog/retrieve-a-portion-of-html-with-jquery/
How can i parse the content? Best regards
Hi Ali, good you liked tutorial.
As its explained in the post, you should first use $.ajax() method to retrieve HTML and then use .find method on response HTML and provide the id of the element you want to find in the HTML body.
Hi Saulius,
Thank you four the Answer. That means, i write just the extern url as value to the url?
Ok, one thing to note here is that you can only use this approach with urls on the same web server.
If domain is different – you are using $.ajax() to load http://www.htmlcenter.com from you own domain – web browsers will cross origin resource sharing (CORS) restrictions apply.
This basically means that web browser will try to verify if server allows CORS requests and by default most web servers wont.
This link might help you to research more:
http://stackoverflow.com/questions/5584923/a-cors-post-request-works-from-plain-javascript-but-why-not-with-jquery
Hi, Is it only for the static div content or also for dynamic div content ?