Jquery Find Is Not Working On Ajax Return Data

function openFaceBox(path) { $.ajax({ type: 'GET', url: path, success: function( data ) { $.facebox( data ); // data returns html

Solution 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.

Solution 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
});

functionopenFaceBox(path) {
    $.ajax({
        type: "GET",
        url: path,
        success: function( data ) {
            $.facebox( data ); // data returns htmlvar 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.

Solution 3:

I don't know what $.facebox() is but you aren't going to be able to find the height of an element until it has loaded onto the DOM. This is kinda crazy but it should get you your height.

    $('body').append($('<div>',{class:'faceboxHolder'}).css('left':'5000px', 'position':'absolute').append(data));    

    var tableHeight = $('.faceboxHolder').find('table').height();

    $('.faceboxHolder').remove();