Benutzer mit den meisten Antworten
Animation während Ladervorgang anzeigen mit jQuery

Frage
-
Hallo allerseits!
Ich hätte folgendes Problem wo ich nicht mehr weiter komme und hoffe das ich mir dabei helfen könnt.
Ich habe eine MasterPage, in der ich versuche alle notwendigen Sachen zu laden und danach auf der Seite anbinde bzw. manche selber die Werte zuweise.
Dazu habe ich eine Methode (Bsp. StartInitialize). Inder StartInitialize-Methode werden nacheinander mehrere Funktionen aufgerufen.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
StartInitialize(function () { return false; });
// Weiterer Code hier
});
function StartInitialize(){
$.ajax({
type: "POST",
url: "cControl.aspx/showLoader",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$('#divLoader').dialog('open');
$('#divLoader').html(msg.d);
ladeInfo(function () { return false; });
ladeUser(function () { return false; });
ladeInfo2(function () { return false; });
ladeUser2(function () { return false; });
ladeInfo3(function () { return false; });
ladeUser3(function () { return false; });
},
error: ResponseFailsLoggedMaster
});
/// ... usw.
}
function ladeUser3(){
// Weiterer Code hier
...
// Zum Schluss den Loader schließen
$('#divLoader').dialog('open');
}
// Weiterr functions ...
</script>
So, das 1. Problem ist das die Methoden nicht nacheinander abgearbeitet wird sondern irgendwie gleichzeitig da die letzte Methode erreicht wird bevor die Daten vollständig geladen sind. Das bedeuted das
$('#divLoader').dialog('close')
aufgerufen wird während die anderen Infos geladen und angebunden werden.
Mein Ziel:
-) Wie kann man die Mehtoden nacheinander aufrufen. So das die nächste erst augerufen wird wenn vorherige vollständig abgearbeitet wurde.
-) Ich möchte bei jedem PostBack den Loader anzeigen daher liegt das in der MasterPage.
Jedoch wird der Loader beim PostBak nie angezeigt.
Ich habe auch StartInitialize-Methode im Body-Tag
<body onload="StartInitialize(function () { return false; });" > ...
bzw. das beenden im $(window).load versucht
$(window).load(function () { $('#divLoader').dialog('open'); });
Doch auch hier wird der Loader beendet bevor die Daten geladen wurden.
Wie kann man am besten bei jedem PostBack den Loader solange anzeigen bis auch alle Daten geladen sind. Bin auch offen für andere Vorschläge die aber den Ablauf nicht beeinträchtigen dürfen.
Und wie kann man die Methoden nacheinander aufrufen.
Vielleicht habe ich ja einen Gedankenfehler???
Ich bedanke mich schon mal im vorhinein und
Lg
String.Rise
Antworten
-
Hi,
der Denkfehler ist, dass Du den Dialog an der falschen Stelle öffnest und schließt.
Dein Dialog wird erst geöffnet, wenn der jQuery.ajax Aufruf erfolgreich beendet wurde. Das macht IMHO wenig Sinn.
$('#divLoader').dialog('open');
sollte daher direkt als erste Zeile in "StartInitialize" eingefügt werden.
$('#divLoader').dialog('close'); (ist bei dir übrigens falsch, da steht bei dir 'open')
steht zwar in der Methode "ladeUser3", wenn dort aber auch irgendwas asynchrones aufgerufen wird, müsstest Du den Aufruf von $('#divLoader').dialog('close'); dort einbauen, wo der asynchrone Aufruf beendet wird. Bei jQuery.ajax bspw. im "success" Handler.
Wenn Du den Dialog bei jedem PostBack anzeigen willst, solltest Du das auch _vor_ dem Postback machen. Der Dialog wird dann automatisch geschlossen, wenn die Seite neu geladen wurde. Du könntest den Aufruf $('#divLoader').dialog('open'); bspw. per Page.ClientScript.RegisterOnSubmitStatement in den onsubmit Handler einschleusen.
Gruß, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET
http://www.asp-solutions.de/ - Consulting, Development
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community- Als Antwort markiert String.Rise Donnerstag, 22. November 2012 16:35
Alle Antworten
-
Hi,
der Denkfehler ist, dass Du den Dialog an der falschen Stelle öffnest und schließt.
Dein Dialog wird erst geöffnet, wenn der jQuery.ajax Aufruf erfolgreich beendet wurde. Das macht IMHO wenig Sinn.
$('#divLoader').dialog('open');
sollte daher direkt als erste Zeile in "StartInitialize" eingefügt werden.
$('#divLoader').dialog('close'); (ist bei dir übrigens falsch, da steht bei dir 'open')
steht zwar in der Methode "ladeUser3", wenn dort aber auch irgendwas asynchrones aufgerufen wird, müsstest Du den Aufruf von $('#divLoader').dialog('close'); dort einbauen, wo der asynchrone Aufruf beendet wird. Bei jQuery.ajax bspw. im "success" Handler.
Wenn Du den Dialog bei jedem PostBack anzeigen willst, solltest Du das auch _vor_ dem Postback machen. Der Dialog wird dann automatisch geschlossen, wenn die Seite neu geladen wurde. Du könntest den Aufruf $('#divLoader').dialog('open'); bspw. per Page.ClientScript.RegisterOnSubmitStatement in den onsubmit Handler einschleusen.
Gruß, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET
http://www.asp-solutions.de/ - Consulting, Development
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community- Als Antwort markiert String.Rise Donnerstag, 22. November 2012 16:35
-
Hallo Stefan,
danke vorerst für deine prompte Antwort.
Das mit der Methode loadUser3 und stattmit "open", ist ein Copy- Paste Fehler hier im Beitrag. Im Code war anstelle von open, close.
Das mit dem
$('#divLoader').dialog('open');
kann ich nicht an die erste Stelle bringen da der Inhalt ein UserControl ist und den lese ich mit ajax aus. Daher ist das die erste Methode welche nach document.ready aufgerufen wird.
Durch aus denkbar den Table und Div was den Loader ausmacht in die MAsterPage aufzunehmen und mit display:none versehen, somit würde der Ansatz mal helfen.
Den Link werde ich mit mal ansehen und und danach wieder melden.
Danke nochmals für die Tipps und den Link.
Danke und Lg
String.Rise