Jquery find is not working on AJAX return data

Question

function openFaceBox(path) {
    $.ajax({
        type: "GET",
        url: path,
        success: function( data ) {
            $.facebox( data ); // data returns html
                    var tableHeight = $(data).find('table').height();
                    console.log( tableHeight ); // Output : 0 (Zero)
        }               
    }); 
}

My AJAX return html is below :

<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>
<table>
    <tr>
        <td>abcd</td>
        <td>Some Text Here Some Text Here Some Text Here Some Text Here
            Some Text Here Some Text Here Some Text Here Some Text Here Some Text
            Here Some Text Here Some Text Here Some Text Here Some Text Here Some
            Text Here Some Text Here Some Text Here Some Text Here Some Text Here
            Some Text Here Some Text Here Some Text Here Some Text Here Some Text
            Here</td>
    </tr>
</table>

I can not figure out why .find() is not working. Basically I want to find table height.Any confusion please let me know.

Answer 1

Use filter().

console.log($(data).filter('table'));

Presuming that data is a string of HTML, you can do this:

$(data).find('table');

That will return the table without adding the data to the DOM.

Answer 2

You need to do something like

Register a reveal.facebox event handler

$(document).on('reveal.facebox', function(){
    var tableHeight = $('#facebox .content table').height();
    //Do whatever you want with the height
});

function openFaceBox(path) {
    $.ajax({
        type: "GET",
        url: path,
        success: function( data ) {
            $.facebox( data ); // data returns html
                    var tableHeight = $(data).find('table').height();
                    console.log( tableHeight ); // Output : 0 (Zero)
        }               
    }); 
}

Demo: Fiddle

Note:
$(data).find('table').height() won't work since this element is not yet rendered to the dom, so there is no height/width for this element. Once the facebox item is rendered facebox triggers a revleal.facebox event, and the facebox content is by default rendered to #facebox .content element.