Estoy seguro de que esto se ha discutido repetidamente, pero estoy perplejo. Estoy usando jQuery para hacer una llamada AJAX a un servicio web ASP.NET que devuelve algo de HTML. Esa parte está funcionando bien.

Quiero hacer algunos cálculos sobre la altura del código HTML devuelto, pero cuando la llamada se realiza por primera vez, obtengo una altura de 0. Sé que mi cálculo solo ocurre antes de que se complete la llamada AJAX, porque en el segundo Intenta que funcione. Si borro el caché, devuelve 0 nuevamente.

Necesito activar un evento después de que se procese el html. He intentado eventos globales y locales como 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());
    } 
});

Agradezco cualquier ayuda.

3
Dustin Laine 9 jun. 2009 a las 01:54

3 respuestas

La mejor respuesta

Parece que su cálculo de altura se está ejecutando antes de que el html se inserte y se represente en el DOM. Asegúrese de escalonarlo con una llamada setTimeout o un intervalo. Por ejemplo:

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

Debe sondear el html que se inserta en el DOM y se procesa.

7
ajm 8 jun. 2009 a las 22:01

Con toda probabilidad, el evento completo se dispara simultáneamente si no antes del evento de éxito, ya que se dispara por completo tan pronto como los datos AJAX terminen de recibirse. El evento de éxito se dispara una vez que recibe los datos de retorno con el código de estado 200 OK.

Podría usar un retraso, pero personalmente creo que sería mejor usar el método jQuery's queue ():

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

El dequeue () al final es importante para restaurar el flujo normal de las cosas.

En ese momento, simplemente se deshace por completo de la devolución de llamada completa.

2
Gabriel Hurley 8 jun. 2009 a las 22:18

Es posible que no entienda su pregunta por completo, pero podría intentar configurar el código de actualización en un tiempo de espera que se ejecuta inmediatamente después del evento completado ...

//..your other code here

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

//...the rest of your code
1
Hugoware 8 jun. 2009 a las 22:03