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.
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>
js
$(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
}
});
});
});