Zentrieren einer div mit einem "Loading..." spinner.gif mit jQuery und Ajax.BeginForm

aw,

weiß nicht, warum dies nicht eingetreten zu mir früher. Sie überwinden könnten, die gesamte Ausgabe der zusätzliche div in der master-Vorlage mit jquery. a la:

function initSpinnerFunction(){
    //this would be you first line (i.e. prepend to body)
    $("body").prepend("<div id ='PleaseWait' style='display:none;'></div>");
    //OR if you want a jquery reference to the newly 
    //created div for whatever reason
    var newDiv = $("<div id ='PleaseWait' style='display:none;'></div>")
                 .prependTo('body');
    //then do rest of normal jquery stuff such as making div visible etc...
}

function exitSpinnerFunction(){
    //normal spinner exit stuff followed by final line 
    //which removes the pleasewait div from the DOM
    $("body").remove("#PleaseWait");
    //OR
    $("#PleaseWait").remove();
}

es kann oder kann nicht angemessen sein, aber sicherlich würde es zu begrenzen, nur die Seiten, die aktiv aufgerufen, die spinner....

InformationsquelleAutor jim tollan

Hack 1:

Habe ich "löste" das problem, die habe ich verschoben in die #Bittewarten div ganz oben auf der site-master-Ansicht. So, #PageContanier, mit Ihrer relativen position, ist nicht die Interaktion mit dem set-up. Es funktioniert jetzt.

Der Nachteil ist, dass jetzt JEDE Seite in der app hat das div (mit style="display:none;"). Nur einige von Ihnen jemals brauchen es.

Hack 2:

Einer Verbesserung auf Hack 1 erstellen Sie ein Platzhalter für den Inhalt nur unter dem body-tag. So, von den Seiten, wo Sie es brauchen, können Sie Spritzen, was auch immer div, die Sie brauchen, um einen zentrierten panel auf Ihren Seiten.

Dies beseitigt die Redundanz, die in Seiten, die nicht die Platten, und gibt Ihnen eine Menge Flexibilität. Der Nachteil ist aber, dass jedes mal, wenn Sie den code zu schreiben. Nicht gerade TROCKEN, so...

Look Mum, no Hacks!:

Dank Jim ' s Vorschlag (siehe akzeptierte Antwort), habe ich geknackt das Problem. Nicht mehr hacks erforderlich.

Kann ich mit einem reinen jQuery-Lösung, wie folgt (falls javascript deaktiviert ist, passiert nichts, das ist gut).

Also:

Erstellte ich ein Utilities.js Datei und legen Sie dort die folgende Funktion ein:

    function initSpinnerFunction() {
        $("body").prepend("<div id ='PleaseWait' style='display:none;'>Please wait...</div>");.
    }
    //Add the jQuery center() method...
    jQuery.fn.center = function () {
                this.css("position", "absolute");
                this.css("top", ($(window).height() - this.height())/ 2 + $(window).scrollTop() + "px");
                this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
                return this;
            }
            });

Meiner Assistenten.aspx-view lege ich den folgenden jQuery-code:

    $(document).ready(function () {
                initSpinnerFunction();            
            });

            function isValid() {
                $('#PleaseWait').center();
                if (true) //In case I want to return true
                {
                    return true;
                }
                else //I want to return false
                {
                    $('#PleaseWait').hide(); //Manually hide the LoadingElementId
                    return false;
                }
            }

Die isValid () - Funktion verwendet wird, wie vorher, in meiner MVC AJAX-Formular (siehe unten).

MVC Ajax-Formular nicht ändern. Ie:

@using (Ajax.BeginForm(Model.Step.ActionName, 
             null, 
             new AjaxOptions { UpdateTargetId = "wizardStep", OnBegin="isValid", LoadingElementId="PleaseWait" }, 
             new {@name="wizardForm", @id="wizardForm" } ))
        { 
        @* do ajax stuff, see my "Loading... panel below *@
        }

Wenn javascript deaktiviert ist, wird die Lösung noch funktioniert. Die spinner gif nicht zeigen, das ist das richtige Verhalten, da es keine asynch Anfrage, nur eine Seite zu aktualisieren.

Und mit diesem kleinen Rahmen, der hack oben beschrieben ist nicht mehr erforderlich: nur die Seiten, die Sie explizit anfordern müssen es die Bittewarten div.

Stil der Bittewarten div, die ich verwendet habe:

<style type="text/css">
        #PleaseWait
        {
            z-index: 2000;
            padding:6px;
            padding-left:40px;
            background:#F2E8BC url("../Images/Shared/spinner.gif") no-repeat 6px center;
            width:200px;
            height:80px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border:4px solid #666;
            font-weight:bold;
        }
    </style>

Diese Regel erzeugt eine stumpfe quadratische box im IE, aber mit Mozilla Browsern, wird es produzieren eine natty wee-box mit abgerundeten Ecken, so dass es sich sehr pro.

Job gemacht, vielen Dank an Jim.

InformationsquelleAutor awrigley