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.

Dipesh Parmar · Accepted Answer · 2013-03-08 11:17:05Z

3

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.

answered Mar 8, 2013 at 11:17

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dipesh Parmar Over a year ago

@SoumyaBiswas try adding height="10" to table and then try..it always work..there is no height defined.

som Over a year ago

Actually I want to find the height of the table.Table data will be increased.So we can't set table height by default.

Arun P Johny · Accepted Answer · 2013-03-08 16:34:16Z

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.

colemande · Accepted Answer · 2013-03-08 16:17:15Z

0

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();

answered Mar 8, 2013 at 16:17

colemande

3921 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Jquery find is not working on AJAX return data

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related