2015-10-28 27 views
8
でAjaxの呼び出しを追加する方法

私のAjaxの方法は、私はこの1つ甘い警告

swal({ 
       title: "Are you sure ?", 
       text: "You will not be able to recover this imaginary file!", 
       type: "warning", 
       showCancelButton: true, 
       confirmButtonColor: "#DD6B55", 
       confirmButtonText: "Yes, delete it!", 
       closeOnConfirm: false 
       }, 
       function(){ 
        swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
       }); 

のような甘いアラート警告ポップアップ何かを見せたいこの

$.post(url,{ 
      ajax_call:"putDonation", 
      addresse:addresse, 
      phone:phone, 
      email:email, 
      name:name, 
      amount:amount, 
      amountinwords:amountinwords 
      }).done(function(data){ 

      console.log(data); 

      var arr = []; 

      try { 
        var str = ""; 
        //convert to json string 
         arr = $.parseJSON(data); //convert to javascript array 
         $.each(arr,function(key,value){ 
         str +="<li>"+value+"</li>"; 
        }); 
         alert(str); 
         $(".alert-danger").show(); 
         $("#error").html(str); 

       } catch (e) { 
        swal("Jay Gayatri !", 'Donation Sucessful', "success") 
        $("#donation")[0].reset(); 
       } 


      }) 

のように見え、彼らはクリックするとキャンセル彼らはajaxコールを行うべきではありません。もし彼らがyesを選択した場合は、コールだけが行われます。

Ajaxメソッドを埋め込む方法を教えてください。Sweet Alertメソッド

ありがとうございました

答えて

19

簡単な例として、私は自分のサイトでどのようにしたのかを示すことができます。私はAjaxコールを甘い警告の中に入れました。

function deleteorder(orderid) { 
     swal({ 
      title: "Are you sure?", 
      text: "Are you sure that you want to cancel this order?", 
      type: "warning", 
      showCancelButton: true, 
      closeOnConfirm: false, 
      confirmButtonText: "Yes, cancel it!", 
      confirmButtonColor: "#ec6c62" 
     }, function() { 
      $.ajax(
        { 
         type: "post", 
         url: "/admin/delete_order.php", 
         data: "orderid="+orderid, 
         success: function(data){ 
         } 
        } 
      ) 
      .done(function(data) { 
      swal("Canceled!", "Your order was successfully canceled!", "success"); 
      $('#orders-history').load(document.URL + ' #orders-history'); 
      }) 
      .error(function(data) { 
      swal("Oops", "We couldn't connect to the server!", "error"); 
      }); 
     }); 
     } 

したがって、確認ボタンを押すと、ajaxコールが行われます。私はこれがあなたのコードを必要な方法で手配するのを助けることを願っています。サイト内にあっ

2

そのこれは私のサイトで自分のコードを使用することである

swal({ title: "Ajax request example", 
    text: "Submit to run ajax request", 
    type: "info", showCancelButton: true, 
    closeOnConfirm: false, 
    showLoaderOnConfirm: true, 
}, 
function(){ 
    $.post(url,data,callback) 
}); 
1

をreference-。

preConfirm: function() { return new Promise(function (resolve, reject) {}) } 

  swal({ 
       title: 'Are you sure?', 
       text: "Are you sure that you want to cancel this order?", 
       showCancelButton: true, 
       confirmButtonText: 'Confirm', 
       cancelButtonText: 'Cancel', 
       showLoaderOnConfirm: true, 
       preConfirm: function() { 
       return new Promise(function (resolve, reject) { 
        $.ajax({ 
         success: function(response) { 
           resolve(response) 
         }, 
         error: function(a, b, c){ 
           reject("error message") 
         } 
        }) 
       }) 
       }, 
       allowOutsideClick: false 
      }).then(function (response) { 

       swal({ 
        title: 'Success', 
        type: 'success', 
        html: '<p>Thank you</p>', 
        showCancelButton: false, 
        confirmButtonColor: '#3085d6', 
        confirmButtonText: 'Close!', 
        allowOutsideClick: false 
       }).then(function() { 
        window.location = '/'; 
       }) 

      }) 

あなたは、AJAX応答の後

resolve(response) 

または

reject() 

を呼び出す必要があります。