Почему я не могу получить рассчитанную высоту содержимого, вставленного в ответ на запрос jQuery AJAX?

Question

Я уверен, что это обсуждалось неоднократно, но я в тупике. Я использую jQuery для вызова AJAX веб-службы ASP.NET, которая возвращает HTML. Эта часть работает нормально.

Я хочу сделать некоторые вычисления для высоты возвращаемого HTML, но когда вызов происходит впервые, я получаю высоту 0. Я знаю, что мои вычисления происходят только до завершения вызова AJAX, потому со второй попытки это работает. Если я очищаю кеш, он снова возвращает 0.

Мне нужно запустить событие после рендеринга HTML. Я пробовал как глобальные, так и локальные события, такие как 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());
    } 
});

Я ценю любую помощь.

Answer 1

Похоже, ваш расчет высоты выполняется до того, как HTML будет вставлен и отображен в DOM. Удостоверьтесь, что пошатните это с вызовом setTimeout или интервалом. Например:

$.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());
    }
}

Вам нужно опросить HTML, который вставляется в DOM и отображается.

Answer 2

По всей вероятности, событие complete запускается одновременно, если не за до события успеха, так как complete запускается сразу после получения данных AJAX. Событие успеха вызывается после получения данных возврата с кодом состояния 200 OK.

Вы можете использовать задержку, но лично я думаю, что использование метода queue () в jQuery было бы лучше:

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

Удаление () в конце важно восстановить нормальный поток вещей.

В этот момент вы просто полностью избавляетесь от полного обратного вызова.

Answer 3

Возможно, я не совсем понимаю ваш вопрос, но вы можете попробовать установить код обновления в тайм-аут, который запускается сразу после завершенного события ...

//..your other code here

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

//...the rest of your code