web-dev-qa-db-fra.com

Comment ajouter un appel Ajax avec une alerte douce

Ma méthode Ajax ressemble à ceci

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


           })

Je veux afficher une fenêtre contextuelle d'avertissement d'alerte douce, quelque chose comme celle-ci

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

Et s'ils cliquent sur annuler, cela ne devrait pas faire l'appel ajax, s'ils sélectionnent oui, alors seul l'appel devrait avoir lieu

Alors, quelqu'un peut-il me dire comment puis-je intégrer la méthode Ajax dans Sweet Alert méthodes

Merci

jqueryajaxsweetalert
8
Vikram Anand Bhushan

Pour un exemple rapide, je peux vous montrer comment je l'ai fait sur mon site. J'ai mis l'appel Ajax dans la douce alerte.

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

L'appel ajax n'est donc effectué que si vous appuyez sur le bouton de confirmation. J'espère que cela peut vous aider à organiser votre code comme vous en avez besoin.

21
Marcel Wasilewski

Ceci est mon code utilisé sur mon site.

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

            })

Dans

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

Vous devez appeler

resolve(response)

ou

reject()

après des réponses ajax.

2
Marosdee Uma

C'est là dans le site référence-

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

Vous pouvez le faire comme ceci Prenez une entrée pour une alerte douce et envoyez-la par demande ajax

function change_stock(item_id) {
    swal({
  title: "Edit Stock!!",
  text: "Enter the stock No: you wanded to change",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  inputPlaceholder: "Write something"
}, function (inputValue) {
  if (inputValue === false) return false;
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    return false
  }
  setTimeout(function () { 
    $.ajax( 
                    {  
                        type: "POST",
                        url: "edit_stock.php",
                        data: { stock_no : inputValue,itemid:item_id },
                        success: function(){
                                                        swal({ title: "Updated!", text: "Stock No: has Changed", type: "success",}, 
                                         function () { location.reload(true); });
                        }
                                                
                                                
                    }
            );
          
  }, 2000); 
}

);
                
}
0
Adarsh