I'm using jQuery's ajax code to load new pages, but wanted him to get only the html of a div.
My codes: HTML:
<body>
<div id="content"></div>
</body>
Script:
$.ajax({
url:href,
type:'GET',
success: function(data){
$('#content').html(data);
}
});
I wanted him to get only the html of $('div#content') on another page. How to do it?
This question is related to
javascript
jquery
html
If you are looking for content from different domain this will do the trick:
$.ajax({
url:'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Briarcliff_Manor,_New_York',
type:'GET',
success: function(data){
$('#content').html($(data).find('#firstHeading').html());
}
});
Unfortunately an ajax request gets the entire file, but you can filter the content once it's retrieved:
$.ajax({
url:href,
type:'GET',
success: function(data) {
var content = $('<div>').append(data).find('#content');
$('#content').html( content );
}
});
Note the use of a dummy element as find() only works with descendants, and won't find root elements.
or let jQuery filter it for you:
$('#content').load(href + ' #IDofDivToFind');
I'm assuming this isn't a cross domain request, as that won't work, only pages on the same domain.
Ok, You should "construct" the html and find the .content div.
like this:
$.ajax({
url:href,
type:'GET',
success: function(data){
$('#content').html($(data).find('#content').html());
}
});
Simple!
You can use JQuery .load() method:
$( "#content" ).load( "ajax/test.html div#content" );
$.ajax({
url:href,
type:'get',
success: function(data){
console.log($(data));
}
});
This console log gets an array like object: [meta, title, ,], very strange
You can use JavaScript:
var doc = document.documentElement.cloneNode()
doc.innerHTML = data
$content = $(doc.querySelector('#content'))
Source: Stackoverflow.com