1. 22
    
$.ajax({  
            type: "POST",  
            url: "/game-checkin",  
            data: dataString,  
            beforeSend: function() {
                ... your initialization code here (so show loader) ...
            },
            complete: function() {
                ... your finalization code here (hide loader) ...
            },
            success: function(badges) {  
            $('#checkin-form').html("<div id='message'></div><div id='badges'></div>");  
            $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");  
            $.each(badges, function(i,badge) {
              $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='"+badge.image_url+"'><span class='badge-title'>"+badge.name+"</span></p>");  
});

    http://api.jquery.com/jQuery.ajax/:

    Hier sind die callback-hooks zur Verfügung gestellt, die von $.ajax():

    beforeSend callback aufgerufen wird; es erhält das jqXHR-Objekt und die Einstellungen der Karte als Parameter.
    error-callbacks aufgerufen werden, in der Reihenfolge, wie Sie eingetragen werden, wenn die Anforderung fehlschlägt. Erhalten Sie die jqXHR, eine Zeichenfolge, die den Fehler geben, und ein exception-Objekt, falls zutreffend. Einige eingebaute Fehler wird ein string als Ausnahme-Objekt: "Abbrechen", "timeout", "Kein Transport".
    dataFilter-callback aufgerufen wird, wird sofort nach dem erfolgreichen Empfang der response-Daten. Es erhält die Daten zurückgegeben und der Wert vom Datentyp, und zurück müssen Sie den (möglicherweise geänderten) Daten weitergeben Erfolg.
    Erfolg Rückrufe sind dann aufgerufen, in der Reihenfolge, wie Sie eingetragen werden, wenn die Anforderung erfolgreich ist. Erhalten Sie die zurückgegebenen Daten in eine Zeichenfolge, die den "success" - code, und das jqXHR-Objekt.
    komplette Rückrufe Feuer, in der Reihenfolge, wie Sie eingetragen werden, wenn die Anfrage beendet ist, egal ob im Erfolg oder Misserfolg. Sie erhalten das jqXHR-Objekt, sowie ein string, der den Erfolg oder Fehlercode.

    Hinweis: die beforeSend und komplett Methode Ergänzungen der code.

    Hoffe, das hilft.

    InformationsquelleAutor der Antwort Mandrake

  2. 6

    Wenn Sie mit jQuery 1.5, die Sie tun könnten, freundlich, unauffällig und allgemein mit einem Vorfilter. Machen wir ein sehr einfaches plugin dafür:

    (function($) {

    var animations = {};

    $.ajaxPrefilter(function( options, _, jqXHR ) {
        var animation = options.animation && animations[ options.animation ];
        if ( animation ) {
            animation.start();
            jqXHR.then( animation.stop, animation.stop );
        }
    });

    $.ajaxAnimation = function( name, object ) {
        if ( object ) {
            loadingAnimations[ name ] = object;
        }
        return loadingAnimations[ name ];
    };

})( jQuery );

    Installieren Sie eine animation wie folgt:

    jQuery.ajaxAnimation( "spinner" , {
    start: function() {
        //code that starts the animation
    }
    stop: function() {
        //code that stops the animation
    }
} );

    dann geben Sie die animation in ajax-Optionen:

    jQuery.ajax({
    type: "POST",
    url: "/game-checkin",
    data: dataString,
    animation: "spinner",
    success: function() {
        //your success code here
    }
});

    und der Vorfilter wird sicherstellen, dass die "spinner" die animation gestartet und beendet wird, wenn nötig.

    Natürlich, auf diese Weise, können Sie eine alternative Animationen installiert, und wählen Sie die, die Sie brauchen pro Anfrage. Sie können auch eine Standard-animation für alle Anfragen, die mit ajaxSetup:

    jQuery.ajaxSetup({
    animation: "spinner"
});

    InformationsquelleAutor der Antwort Julian Aubourg

  3. 3

    Die beste Methode, die ich gefunden haben, vorausgesetzt, Sie bevölkern ein Geschenk, aber leere Feld ein .loading Klasse definiert, mit background-image: url('images/loading.gif') in Ihrem CSS. Dann können Sie hinzufügen und entfernen Sie den laden Klasse wie nötig mit jQuery.

    InformationsquelleAutor der Antwort Chris Sobolewski

  4. 2
    $(function() {
        $('.error').hide();
        $("#checkin-button").click(function() {
                var mid = $("input#mid").val();
                var message = $("textarea#message").val();
                var facebook = $('input#facebook').is(':checked');
                var name = $("input#name").val();
                var bgg_id = $("input#bgg-id").val();
                var thumbnail = $("input#thumbnail").val();
                var dataString = 'mid=' + mid + '&message=' + message + '&facebook=' + facebook + '&name=' + name + '&bgg_id=' + bgg_id + '&thumbnail=' + thumbnail;
                $.ajax({
                        type : "POST",
                        url : "/game-checkin",
                        data : dataString,
                        beforeSend : function() {
                         $('#preloader').addClass('active');
                        },
                        success : function(badges) {
                            $('#preloader').removeClass('active');
                            $('#checkin-form').html("<div id='message'></div><div id='badges'></div>");
                            $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");
                            $.each(badges, function(i, badge) {
                                    $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>");
                                });
                        },
                        complete : function() {
                            $('#preloader').removeClass('active');                      
                        }
                    });
                return false;
            });
    });
    #preloader{
 background: url(staticpreloader.gif);
}
.active {
 background: url(activepreloader.gif);
}

    InformationsquelleAutor der Antwort Idered

  5. 2

    Schrieb ich eine blog-post darüber, wie dies zu tun auf einem generischen Dokument-Ebene.

    //prepare the form when the DOM is ready 
$(document).ready(function() { 

  //Setup the ajax indicator
  $('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>');

  $('#ajaxBusy').css({
    display:"none",
    margin:"0px",
    paddingLeft:"0px",
    paddingRight:"0px",
    paddingTop:"0px",
    paddingBottom:"0px",
    position:"absolute",
    right:"3px",
    top:"3px",
     width:"auto"
  });
});

//Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

    InformationsquelleAutor der Antwort SKFox

  6. 2

    Den AJAX-Prozess beginnt, wenn Sie laufen $.ajax() Methode, und es Stoppt, wenn die 'komplette' callback ausgeführt wird. So starten Sie die Bearbeitung Bilder/Benachrichtigung direkt vor der $.ajax() Linie, und beenden Sie es in die 'vollständige' callback.

    ajaxStart und ajaxStop - Handler Hinzugefügt werden können, um beliebige Elemente, und werden genannt, wenn die ajax-Anfragen starten oder zu stoppen (wenn es gleichzeitige Instanzen starten Sie nur aufgerufen wird, wird auf die erste Station am letzten zu gehen). So, es ist nur eine andere Art zu tun, Globale Benachrichtigung, wenn Sie hatte, zum Beispiel, ein status, den spinner irgendwo auf der Seite, das stellt jeden und alle Aktivitäten.

    InformationsquelleAutor der Antwort Craig

  7. 1

    können Sie festlegen, Globale ajax-loading-icon-handler mithilfe der hier #ajxLoader nimmt Ihre laden-Symbol

       $( document ).ajaxStart(function() {
        $("#ajxLoader").fadeIn();
    });

    $( document ).ajaxComplete(function() {
        $("#ajxLoader").fadeOut();
    });

    InformationsquelleAutor der Antwort don't angry me

Schreibe einen Kommentar