jQuery .find() not working on $.post() data

I made a simple example showing the problem: the form below submits to another page using jQuery .post().

Form

$('form').submit(function(){

    $.post(
        $(this).attr('action'),
        $(this).serialize(),
        function(data) {
            var ret = data;
            var final_data = $(ret).find('#holder-1').html();
            alert(final_data);
        }
    )
    return false;

})

Action

<div id="holder-1">
    <h1>Content 1</h1>
</div>

<div id="holder-2">
    <h1>Content 2</h1>
</div>

<div id="holder-3">
    <h1>Content 3</h1>
</div>

The log shows that the content of data looks fine. But once i try to find #holder-1 with .find(), it returns undefined.

This is almost the same as the last example in the jQuery api page: http://api.jquery.com/jQuery.post/

Here is the full (not) working example hosted in my website, with some console.log() along the code:

Form: http://www.peixelaranja.com.br/tmp/post.php

I tried nearly anything: passing the dataType as 4th parameter, using $.ajax() instead of .post(), using .filter() instead of .find(), different versions of jQuery... Nothing seems to work.

All the files are UTF-8.

Any ideas?

Solution

I know you mentioned that you used filter instead of find, however, that should work. jQuery is stripping out the html, head,body tags, etc. Once this is done, #holder-1 is now at the top level of the hierarchy.

This fiddle demonstrates that filter does work:

http://jsfiddle.net/68jEt/

var html = '<!doctype html><html dir="ltr" lang="pt-BR"><head>  <meta charset="UTF-8">  <title>Return Test</title></head><body> <div id="holder-1">     <h1>Content 1</h1>  </div>  <div id="holder-2">     <h1>Content 2</h1>  </div>  <div id="holder-3">     <h1>Content 3</h1>  </div></body></html>';

alert($(html).filter("#holder-1").html());