<div id="working"><img src="loader.gif" style="display:none;"/></div>
$.ajax({
type:'GET',
data:fields,
url:'new/addcomm.php',
beforeSend: function(){
$('#working img').show();
},
complete:function(){
$('#working img').hide();
},
success:function(feedback){
reload();
// alert (feedback);
}
});
show a message as ajax submits a form
-
22-06-2023 - |
Question
Am submitting a form using this code
$.ajax({
type:'GET',
data:fields,
url:'new/addcomm.php',
success:function(feedback){
reload();
// alert (feedback);
}
});
Now. How do I show the please wait gif while the ajax is submitting the form assuming I want it showing in
<div id="working"></div>
Thanks
La solution 2
Autres conseils
To use beforeSend
and complete
settings of ajax.
Documentation
Try this:
$.ajax({
type:'GET',
data:fields,
url:'new/addcomm.php',
beforeSend: function() {
$('#working').show();
},
complete: function() {
$('#working').hide();
},
success:function(feedback){
reload();
// alert (feedback);
}
});
You can use ajaxStart and ajaxStop like this
//show image when clicks on submit button
$('form').ajaxStart(function() {
$('#working').show();
});
//hide image when ajax request stop
$('form').ajaxStop(function() {
$('#working').hide();
});
Hope this helps!
Here is how
HTML
<div id="working"><img src="loader.gif"/></div>
CSS
#working { display: none; }
JS:
var $loader = $('#working');
$loader.show();
$.ajax({
type:'GET',
data:fields,
url:'new/addcomm.php',
success:function(feedback){
reload();
$loader.hide(); //or .fadeOut();
}
});
OR try beforeSend
var $loader = $('#working');
$.ajax({
type:'GET',
data:fields,
url:'new/addcomm.php',
beforeSend: function(){
$loader.show();
},
success:function(feedback){
reload();
$loader.hide(); //or .fadeOut();
}
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow