使用sweetalert加載進度表提交

Question

我想在提交表單時呈現等待時間動畫，但我更喜歡使用SweetAlert而不是標準加載圖像。

這基本代碼：

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

這是代碼SweetAlert希望實現：

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />

PLZ有人做這個提示

Answer 1

你幾乎在那裏！只需用甜蜜的警報代碼代替#loader代碼即可。

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