My purpose is, I want to take specific html out from data and update that area only.
How do I filter the returned data from jQuery.ajax?
This link is a old post but I do have the exactly same problem.
The solution giving from the link is $("[ref=B]").html(data).find( '[ref=A]' );
However, if I do so, the entire page will write on <span ref='B'>
first then find the selector inside of it.....
The alternative way to only find '[ref=A]' is
html = $(data).filter('[ref=B]').find('[ref=A]').html() // this way will work
none of these will work
$(data).find('[ref=A]').html();
$(data).filter('[ref=A]').html();
$(data).filter('body').html();
$(data).find('body').html();
HTML
`<body>
<span ref='B'><span ref='A'>abc</span></span>
</body>`
JS
$(function() {
$.get(window.location.pathname + window.location.search, function(data){ alert(data);});
});
Returned Data
<html>
<body>
<span ref='B'><span ref='A'>abc</span></span>
</body>
</html>
My question is, is there a solution to filter body`s html from data which returned from $.ajax?? like
body_html = $(data).???????
then I can do whatever I want, like
body_html.find('xxxx');
Thank you very much for your advice.
The way you do it in your question, the last part
find( '[ref=A]' )
is useless.[Edit] Also, the other question is more than 2 years old. For recent versions of jQuery you might need additional quotes:
You can use a DocumentFragment to simulate your html and do your search without appending it to the DOM.
You also can do a filter in jQuery templating
$(data).filter('.foo')
but as you can see in this tests, your performance will drop a lot.