jQuery Ajax .html（）准备请求

Im using Jquery Ajax to load content and insert it into a div using .html() method. Afterwards I need to get the height of the loaded content to calculate further sizes, but it seems that the content is not finally loaded. When i try to get its height it sometimes works fine but another time i get a to small height value.

Ajax load function:

function loadPage(url,data){
    jQuery.ajax({
        'url': url,
        'dataType': 'json',
        'data': data,
        success: function(data,s,xhdr){ // data, status
                        if(!data){ return false };
            pagenav(data);
        }
    });
    return false;}

function pagenav(data){
    if(!data){ return false };
    if(typeof(data.content)=="object"){
        for(var i in data.content){
            if(data.content[i].target_id == 'panelMain'){
                        jQuery('#panelMain').html(data.content[0].content);
                            setTimeout(function(){ 
                                onLoad();
                            },0);

            }else{
                jQuery('#panelFooter').html(data.content[1].content);
            }
        }
    }
    }

onLoad Function handles the whole height thing. Im trying to use the setTimeout method to make the DOM load completely before manipulating the new elements. Setting the timeout to a bigger value (lets say 500) works fine for me but that cant be the right way to go i guess.

thanks in advance

There are several issues with your code, as I can see it...

First of all you return something in pagenav() when data evaluates to false, this is the same check you already do in the ajax success callback.

Secondly you walk through data.content putting the key in the variable i. In that for loop you check if the current key in data.content has an attribute target_id equal to 'panelMain'. If this is true you somehow assume that w/e goes in panel main will be in data.content[0] => I believe this should be data.content[i] no?

Your onLoad() call is in the for loop so in could potentially be called multiple times or before the for loop has been ended....

Here is what I think you want to do:

function loadPage(url, data) {
    jQuery.ajax({
        'url': url,
        'dataType': 'json',
        'data': data,
        success: function(data, s, xhdr) { // data, status
            if (!data) {
                return false
            };

            pagenav(data);
        }
    });
    return false; // mind you this function will always return false since ajax calls are async
}

function pagenav(data) {
    if (typeof(data.content) == "object") {
        for (var i in data.content) {
            jQuery('#' + data.content[i].target_id).html(data.content[i].content);
        }

        onLoad();
    }
}