I would like to render a waiting time animation when submitting a form, but I prefer to use SweetAlert
rather than a standard loading image.
This the basic code:
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
$("#loader").show(); // shows the loading screen
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
$("#loader").hide(); // hides loading sccreen in success call back
}
});
});
I would like to render a waiting time animation when submitting a form, but I prefer to use SweetAlert
rather than a standard loading image.
This the basic code:
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
$("#loader").show(); // shows the loading screen
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
$("#loader").hide(); // hides loading sccreen in success call back
}
});
});
This is the code SweetAlert wants to implement:
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
});
//using setTimeout to simulate ajax request
setTimeout(() => {
window.swal({
title: "Finished!",
showConfirmButton: false,
timer: 1000
});
}, 2000);
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/sweetalert/1.1.3/sweetalert.css" />
plz someone make the tips for doing this
Share Improve this question edited Oct 16, 2017 at 15:32 Philip Raath 4905 silver badges18 bronze badges asked Oct 16, 2017 at 15:28 hertanethertanet 551 gold badge4 silver badges12 bronze badges 2- It isn't clear to me what your question is. Can you please ask a more specific question, rather than "someone make the tips for doing this"? – Philip Raath Commented Oct 16, 2017 at 15:32
- @PhilipRaath my question is using sweetalert rather than loader gif take a look and run the second snippet – hertanet Commented Oct 16, 2017 at 15:37
1 Answer
Reset to default 11You were almost there! Just replace the #loader
code with the sweet alert code.
$("form").submit(function (e) {
e.preventDefault(); // stops the default action
//$("#loader").show(); // shows the loading screen
window.swal({
title: "Checking...",
text: "Please wait",
imageUrl: "images/ajaxloader.gif",
showConfirmButton: false,
allowOutsideClick: false
});
$.ajax({
url: test.php,
type: "POST"
success: function (returnhtml) {
//$("#loader").hide(); // hides loading sccreen in success call back
window.swal({
title: "Finished!",
showConfirmButton: false,
timer: 1000
});
}
});
});