2015-10-28 34 views
8

Il mio metodo Ajax si presenta cosìCome aggiungere Ajax chiamata con dolce avviso

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


      }) 

voglio mostrare un qualcosa di dolce avvertimento di allarme a comparsa come questo

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

E se si fa clic sul annullare non dovrebbe fare la chiamata Ajax, Se si seleziona Sì, solo la chiamata dovrebbe accadere

Così qualcuno può dirmi come posso incorporare il metodo Ajax nei metodi Sweet Alert

Grazie

risposta

19

Per un esempio veloce che posso mostrarvi come ho fatto sul mio sito. Inserisco la chiamata Ajax nell'allarme dolce.

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

Quindi la chiamata ajax viene eseguita solo se si preme il pulsante di conferma. Spero che questo possa aiutarti ad organizzare il tuo codice nel modo in cui ne hai bisogno.

2

relativo là nel sito Reference

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

Questo è il mio uso codice nel mio sito.

  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 = '/'; 
       }) 

      }) 

In

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

È necessario chiamare

resolve(response) 

o

reject() 

dopo risposte Ajax.