Why am I unable to retrieve the calculated height of content inserted in response to a jQuery AJAX request?

Question

I am sure this has been discussed repeatedly, but I am stumped. I am using jQuery to make an AJAX call to an ASP.NET Web service which returns some HTML. That part is working fine.

I want to do some calculations on the height of the HTML returned, but when the the call happens for the first time I am getting a height of 0. I know my calculation are just happening before the AJAX call is complete, because on the second attempt it works. If I clear cache then it returns 0 again.

I need to fire an event after the html is rendered. I have tried both global and local events like ajaxComplete.

$.ajax({
    type: "POST",
    url: "Webservices/Service.asmx/HelloWorld",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        $("#OverlayContent").html(msg.d);
    }
    complete: function(msg) {
        alert($("#OverlayContent").height());
    } 
});

I appreciate any help.

Answer 1

Sounds like your height calculation is running before the html is inserted and rendered in the DOM. Make sure to stagger it with a setTimeout call or an interval. For example:

$.ajax({
    type: "POST",
    url: "Webservices/Service.asmx/HelloWorld",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        $("#OverlayContent").html(msg.d);
        setTimeout(function(){ getHeight();},100);
    }
});

function getHeight(){
    // If our height is 0, set a new timeout and we'll check again
    if($("#OverlayContent").height() === 0){
        setTimeout(function(){ getHeight() }, 100);
    }
    else{
        alert("The height is: " + $("#OverlayContent").height());
    }
}

You need to poll on the html being inserted into the DOM and rendered.

Answer 2

I may not be understanding your question entirely, but you could try setting the update code in an timeout that runs immediately after the completed event...

//..your other code here

complete:function(m) {
    setTimeout(function() {
        alert($("#OverlayContent").height());
    },1);
}

//...the rest of your code

Answer 3

In all likelihood the complete event is firing simultaneously if not before the success event, since complete fires as soon as the AJAX data is finished being received. The success event is fired once it receives return data with the 200 OK status code.

You could use a delay, but personally I think using jQuery's queue() method would be better:

success: function(msg) {
        $("#OverlayContent").html(msg.d).queue(function(){
            alert($("#OverlayContent").height());
            $(this).dequeue();
        })
    }

The dequeue() at the end there is important to restore the normal flow of things.

At that point you just get rid of the complete callback entirely.