Loading progress form 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" />

プラザ誰かこのためのヒントを作る

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 
 
        }); 
 
       } 
 
      }); 
 
     });