jQuery loader gif and alert message

问题

I have a form, when I click on the save button I would like to display a gif loader, then execute a ajax function (from jquery) to call a file which will save the form, the if it's a success, I want to remove the gif loader and display a message to say the form was successfully saved.

It's not hard... except for me ;o)

Here my code in fiddle: http://jsfiddle.net/WnZ3Y/

$("button#Save").click(function(){                                     
    $.ajax({
        type: "POST",
        url: "",
        data: $('').serialize(),
        beforeSend : function() { // JS code processing before calling the AJAX method
            $('#ajaxLoader-inner').html('Here my loader GIF'); // add a gif loader  
        },
        success: function(){
            $('#ajaxLoader-inner').fadeOut('slow').delay(2000); // remove GIF loader
            $('#ajaxLoader-inner').html('<div class="alert alert-success alert-dismissable" id="ajax-loader-message"><i class="fa fa-check"></i><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Saved with success.</div>').fadeIn('slow').delay(2000).fadeOut('slow'); // add a message to say it's a success
        },
        error: function(){
            alert("Error in ajax."); // alert there is an error
            $('#ajax-loader-inner').fadeOut(); // remove GIF loader
        }
    });
});

So I need some help, please, to find why it doesn't work.

回答1:

Try

html

<form id="ajaxLoader">
    <div id="ajaxLoader-inner"></div>
    <input id="inputs" name="saved" type="text" placeholder="save" />
    <input type="button" id="Save" value="click" />
</form>

   $(function () {
        $("#Save").click(function (e) {
            e.preventDefault();
            var _data = $("#ajaxLoader input[type=text]").val();
            return $.ajax({
                type: "POST",
                url: "/echo/json/",
                data: {
                    json: JSON.stringify({"saved" : _data})
                },
                beforeSend: function () { // traitements JS à faire AVANT l'envoi
                    $('#ajaxLoader-inner')
                    .html('<img src=http://upload.wikimedia.org/'
                          + 'wikipedia/commons/thumb/d/d3/'
                          + 'Newtons_cradle_animation_book_2.gif/'
                          + '200px-Newtons_cradle_animation_book_2.gif />'); // add a gif loader  
                },
                success: function (data, textStatus, jqxhr) {
                    alert(JSON.stringify(data));
                    $('#ajaxLoader-inner img').fadeOut(5000, function () { // remove GIF loader
                        $(this)
                        .replaceWith('<div class="alert alert-success alert-dismissable"'
                        + ' id="ajax-loader-message">'
                        + '<i class="fa fa-check"></i>'
                        + '<button type="button" class="close"'
                        + ' data-dismiss="alert" aria-hidden="true">×'
                        + '</button>Saved with success.</div>') 
                        && $(".alert").fadeIn(0).fadeOut(3700)
                           .parent().siblings("#inputs").val("");
                    }) // add a message to say it's a success
                },
                error: function () {
                    alert("Error in ajax."); // alert there is an error
                    $('#ajax-loader-inner').fadeOut(); // remove GIF loader
                }
            });
        });
    });

jsfiddle http://jsfiddle.net/guest271314/6tpT6/

回答2:

A few minor tweaks below. Not exactly sure what your overall aim is, but the following issues were noted:

Notes:

You have #ajax-loader-inner instead of #ajaxLoader-inner for the error case.
You are not waiting for the fade out before replacing the content. fadeOut is asynchronous but delay only delays subsequent animations, not the html() replacement (which happens before the fadeOut commences). I chained the delay using done on the animation promise, which will trigger when the animation queue ends (including delay calls). You might be better off with a simple setTimeout there.
You need to fadeIn (or show) the initial loader, as it is hidden by previous saves/errors.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/WnZ3Y/2/

$("button#Save").click(function () {
    $.ajax({
        type: "POST",
        url: "",
        data: $('').serialize(),
        beforeSend: function () { // traitements JS à faire AVANT l'envoi
            $('#ajaxLoader-inner').html('Here my loader GIF').fadeIn(); // add a gif loader  
        },
        success: function () {
            $('#ajaxLoader-inner').fadeOut('slow').delay(2000).promise().done(function () {
                $('#ajaxLoader-inner').html('<div class="alert alert-success alert-dismissable" id="ajax-loader-message"><i class="fa fa-check"></i><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Saved with success.</div>').fadeIn('slow').delay(2000).fadeOut('slow'); // add a message to say it's a success
            });
        },
        error: function () {
            alert("Error in ajax."); // alert there is an error
            $('#ajaxLoader-inner').fadeOut(); // remove GIF loader
        }
    });

});

回答3:

You need to show the "ajaxLoader-inner" DIV:

    beforeSend : function() { // traitements JS à faire AVANT l'envoi
        $('#ajaxLoader-inner').show();
        $('#ajaxLoader-inner').html('Here my loader GIF'); // add a gif loader  
    },

来源：https://stackoverflow.com/questions/24590765/jquery-loader-gif-and-alert-message

标签

jquery

ajax

loader