Jquery/javascript, filtering html object from ajax response

javascript jquery ajax filter

23,526

Solution 1

You should store it this way:

$.ajax({
   url: "htmlsnippet.html",
   cache: false,
   async: false,
   dataType: "html",
   success: function(data){
      html = data;
   }
}

EDIT: Your way of obtaining html works, but it's not recommended.
You can't grab your last element because you're using filter instead of find, so you should have:

var htmlFiltered = $(html).find("#1 .text");

instead of

var htmlFiltered = $(html).filter("#1 .text");

Also W3C recommends not to have numeric IDs.

EDIT 2: This should work:

var htmlFiltered = $(html).filter("#1").find(".text");

Hope this helps. Cheers

Solution 2

If you don't need any special functionality given by the full $.ajax method, you should give $.load() a try:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

$('#result').load('ajax/test.html #container');

http://api.jquery.com/load/#loading-page-fragments

Solution 3

This works for me :

$.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}

23,526

Author by

rjm

Updated on June 07, 2020

Comments

rjm almost 4 years

I have this piece of html:

<div id="1">
  <div class="text">
     Text for div 2 
  </div>
<img src="images/image1.jpg"></img>
</div>

<div id="2">
  <div class="text">
    Text in div 2
  </div>
  <img src="images/image2.jpg"></img>
</div>

Which I grab with a simple .ajax-call

var html = $.ajax({
         url: "htmlsnippet.html",
         cache: false,
         async: false,
         dataType: "html"
         }).responseText;

If I filter it with:

var htmlFiltered = $(html).filter("#1");

it works just fine, I get the whole div with id="1",
but if I use:

var htmlFiltered = $(html).filter("#1 .text");

the htmlFiltered variable is an empty object. I can't figure out what I'm doing wrong.

ThiefMaster almost 13 years

Sorry, misread your answer and removed the comment but forgot to remove the downvote. Fixed it now.
rjm almost 13 years

Thanks, Edgar, but it doesn't work. I renamed the divs and used your method of obtaining and storing the html, but .filter still won't grab any elements except the numbered divs. .find doesn't work at all.
rjm almost 13 years

Thanks,very much ! That worked. I hate to be a nag, but can you explain how you got to this solution ? I'm having a hard time understanding what happens to the html object once I grab it with Ajax and use filter on it.
Edgar Villegas Alvarado almost 13 years

.filter only on the nodes that you are selecting, not their children, and .find does the opossite, find in the children, not the nodes you're selecting. So, $(html).filter("#1 .text"); was selecting wrong, cause .text is not a parent, is a child. With $(html).filter("#1").find(".text"), we're filtering only the parents who whave id 1, and its children that are .text. I hope my explanation is understandable
rjm almost 13 years

Yes, I think I understand. So the .text divs are not part of the set defined by the html-object, only their parent divs are.
Edgar Villegas Alvarado almost 13 years

Exactly. Glad to have helped you
mergen about 10 years

Didn't know about that one. Thanks!