Question

I tried this code:

$.post('/script', function(result) {
    var foo = $(result).find('#foo');
    $('#result').html(foo);
});

Here’s the return html:

<div id='foo'>
  Content.
</div>
<div id='new'>
   New data
</div>

After alerting variable foo it returns an object. And the html becomes empty. I would like to print a specific html block (#foo only not #new).

From jQuery documentation:

$.post( url, { s: term } ,
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).html( content );
      }
);

This (var content) would also result to object and printing an empty string on #result.

Answer 1

This happens because both #foo and #new are at the top level.

The .find() method looks for descendants. so you will need to wrap them in another div either at the server-side (result) or the jQuery level.

So either change html to

<div>
   <div id='foo'>
     Content.
   </div>
   <div id='new'>
      New data
   </div>
</div>

or at jquery level

$.post('/script', function(result) {
    var foo = $(result).wrapAll('<div>').parent().find('#foo');
    $('#result').html(foo);
});

If you use the HTML solutions you could however use the .load method which can load page fragments

$('#result').load('/script #foo');

This will load the element with id foo from the /script page and put it in #result element.