Warum kann ich die berechnete Höhe des Inhalts, der als Antwort auf eine jQuery AJAX-Anfrage eingefügt wurde, nicht abrufen?

Question

Ich bin sicher, dass dies wiederholt diskutiert wurde, aber ich bin ratlos. Ich verwende jQuery, um einen AJAX-Aufruf an einen ASP.NET-Webdienst zu senden, der HTML zurückgibt. Dieser Teil funktioniert gut.

Ich möchte einige Berechnungen auf die Höhe des HTML zurückgegeben, aber wenn der Anruf zum ersten Mal passiert, bekomme ich eine Höhe von 0. Ich weiß, meine Berechnung passiert gerade, bevor der AJAX-Aufruf abgeschlossen ist, weil es beim zweiten Versuch funktioniert. Wenn ich den Cache lösche, wird 0 zurückgegeben.

Ich muss ein Ereignis auslösen, nachdem das HTML gerendert wurde. Ich habe sowohl globale als auch lokale Ereignisse wie ajaxComplete ausprobiert.

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

Ich schätze jede Hilfe.

Answer 1

Klingt wie Ihre Höhenberechnung ausgeführt wird, bevor das HTML eingefügt und im DOM gerendert wird. Stellen Sie sicher, dass Sie es mit einem setTimeout-Aufruf oder einem Intervall staffeln. Zum Beispiel:

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

Sie müssen abfragen, auf dem HTML in das DOM eingefügt und gerendert werden.

Answer 2

Ich kann Ihre Frage nicht ganz sein zu verstehen, aber man könnte versuchen, den Update-Code in einem Timeout-Einstellung, die unmittelbar nach dem abgeschlossenen Ereignisse läuft ...

//..your other code here 

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

//...the rest of your code 

Answer 3

das komplette Ereignis feuert Aller Wahrscheinlichkeit gleichzeitig wenn nicht vor das Erfolgsereignis, da das vollständige Ereignis ausgelöst wird, sobald die AJAX-Daten empfangen wurden. Das Erfolgsereignis wird ausgelöst, sobald es die Rückgabedaten mit den 200 OK-Statuscode empfängt.

Sie könnten eine Verzögerung verwenden, aber ich persönlich würde denke, mit jQuery queue() Methode besser sein:

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

Die dequeue() am Ende gibt es wichtig, den normalen Ablauf der Dinge wiederherzustellen.

An diesem Punkt werden Sie nur den vollständigen Rückruf vollständig los.