2010-02-02 6 views
7

Das Szenario ist wie: Ich benutze Jquery, um einige ajax Eigenschaften zu implementieren. Beispiel: Wenn ein Benutzer auf die Schaltfläche "Daten abrufen" klickt, ruft Jquery die Funktion .ajax auf, um einige Daten vom Server abzurufen. Dieser Prozess kann einige Zeit dauern, daher habe ich die Funktionen .ajaxSend und .ajaxComplete hinzugefügt, um eine Animation für den wartenden Prozess zu zeigen (eigentlich ein 'Loading Data' -Gif innerhalb eines div mit dem Z-Index 999)). Während des Wartevorgangs (der 'Daten laden') möchte ich verhindern, dass Benutzer auf andere Schaltflächen klicken (Beispiel: Ich habe andere Registerkarten, Schaltflächen unter dem kleinen 'Daten laden' -Gif). Die Art, wie ich dies erreicht durch:Wie man Benutzerinteraktion verhindert, wenn auf die Antwort von AJAX gewartet wird

$("body").ajaxSend(function() 
    { 
     $(this).append('<div id="loading">Data Loading<\/div>'); 
     $("div#error").remove(); 
     $(this).children().not('#loading').css({'opacity':0.22}); 
    }); 
    $("body").ajaxComplete(function() 
    { 
     $("div#loading").remove(); 
     $(this).children().not('#loading').css({'opacity':1}); 
    }); 

Aber ich glaube nicht, die Opazität Ändern der beste Weg ist. Wenn Sie die Deckkraft nicht auf 0 setzen, können Benutzer weiterhin auf andere Schaltflächen/Register klicken. Ich weiß nicht, wie man Benutzerinteraktionen während dieses Prozesses vollständig vermeidet. Vielen Dank!!

Antwort

5

Verwenden Sie ein Overlay.

http://jqueryui.com/demos/dialog/#modal

+0

tatsächlich verwende ich JqueryUI auch. Ja, ich habe gerade die modale Option des Dialogs ausprobiert. Es ist einfach, den gewünschten Blockeffekt zu erzielen. Gibt es jedoch eine Möglichkeit, die Überkreuzung (Schließen-Schaltfläche) in der oberen rechten Ecke des Dialogfelds zu entfernen? – WilliamLou

+0

Siehe http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog –

+0

danke. Ich wählte dies als meine Antwort, da ich bereits JqueryUI verwendet habe, so dass ich kein anderes Plugin nur für BlockUI-Effekt – WilliamLou

5

sichtbar machen ein div mit einem z-Index über alles andere. onsucess, verstecken Sie es.

für IE6, betrachten Sichtbarkeit Auswahleingänge

+0

importieren muss. Ich wünschte, ich könnte upvote (aber ich bin für die nächsten Stunden), vor allem für die Warnung von IE6 und Formelemente. – Sampson

6

ich jQuery UI-Block mit gutem Erfolg in der Vergangenheit verwendet haben. Funktioniert gut mit Ajax:

http://malsup.com/jquery/block/

wert sein kann, ein Plugin wie diese, anstatt eine ähnliche Lösung Handprogrammierung ...

+0

Nun, dieses Plugin funktioniert gut für diesen Zweck, aber ich möchte nicht zu viele Plugins in diesem Stadium importieren. Danke trotzdem. Wenn ich keine einfachere Lösung finden kann, wende ich mich später an BlockUI. – WilliamLou

0

Ich verwende eine Variante auf Ben Nadel's ajax pipeline. Im Wesentlichen umschließt er den Aufruf von jQuery $ .ajax mit einem Objekt, das ausgehende ajax-Anfragen aufzeichnen kann.

Wenn eine Ajax-Anfrage ausgeht, notieren Sie den Namen der Anfrage. Wenn weitere Anfragen versuchen, mit demselben Namen zu enden, führen Sie sie nicht aus (optional, um dem Benutzer eine Nachricht zu geben).

0

Ich habe versucht, eine Antwort auf eine ähnliche Frage zu bekommen, und ich bin hier gelandet. Ich weiß, es ist eine alte Frage, aber ich möchte darauf hinweisen, dass ein Overlay über die Elemente, die Sie vor der Interaktion schützen möchten, leicht über den Browser-Inspektor entfernt werden kann.

Es scheint mir, dass der beste Weg, um diese Angelegenheit anzugehen, entweder eine globale boolesche Variable für die gesamte Seite einrichten und Aktionen auf der Seite nur ausführen, wenn Ajax nicht ausgeführt wird (zumindest die sensiblen Aktionen) oder einfach den asynchronen Aufruf für Ajax abzustellen, da du in Wirklichkeit in diesem Szenario anscheinend nicht gebraucht wirst (obwohl ich weiß, dass einige Leute mich kreuzigen werden, weil ich das sage).

Verwandte Themen