Cfrgtkky

How can I display loading icon or spin while my during ajax call. below is my code

 swal({

       title: "Confirm your transaction",

        html:true,

       showSpinner: true,

       showCancelButton: true,

        confirmButtonColor: "#DD6B55",

       confirmButtonText: "Send",

      closeOnConfirm: false

  },function () {

      $.ajax({

   type: "post",

    url: remoteUrl,

    data: largeParams,

   success: function (data) { }

  }).done(function (data) {

    swal("Thank you for your order", data, "success");

  }).error(function (data) {

  swal("Oops", "We couldn't connect to the server!", "error");

 });

});

Answers will be appreciated.

Use the promises, this code reference from the website.

https://sweetalert.js.org/guides/#ajax-requests

swal({

  text: 'Search for a movie. e.g. "La La Land".',

  content: "input",

  button: {

    text: "Search!",

    closeModal: false,

  },

})

.then(name => {

  if (!name) throw null;



  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);

})

.then(results => {

  return results.json();

})

.then(json => {

  const movie = json.results[0];



  if (!movie) {

    return swal("No movie was found!");

  }



  const name = movie.trackName;

  const imageURL = movie.artworkUrl100;



  swal({

    title: "Top result:",

    text: name,

    icon: imageURL,

  });

})

.catch(err => {

  if (err) {

    swal("Oh noes!", "The AJAX request failed!", "error");

  } else {

    swal.stopLoading();

    swal.close();

  }

});

From the GitHub doc:

swal({

  title: "Ajax request example",

  text: "Submit to run ajax request",

  type: "info",

  showCancelButton: true,

  closeOnConfirm: false,

  showLoaderOnConfirm: true

}, function () {

  setTimeout(function () {

    swal("Ajax request finished!");

  }, 2000);

});

I've tried this and works perfectly, just replace the setTimeout function with your ajax request.

swal({

        title: "Are you sure?",

        text: "",

        confirmButtonClass: "show-loading-icon",

        cancelButtonClass: "show-loading-icon-delete",

        confirmButtonText: "Confirm",

        cancelButtonText: "Cancel",

        closeOnConfirm: false,

        showCancelButton: true,

        closeOnCancel: true,

        titleClass: "bluecolor",

    }, function (selection) {



        //If confirm click then show loading on confirm button

        if(selection){

            var initial = $(".show-loading-icon").html();



            // you can add glyphicon or font-awesome icon html codes

            $(".show-loading-icon").html("Loading...").attr("disabled", "disabled");



            //Do some operation, eg. ajax call, fetch request etc, then show icon again

            $(".show-loading-icon").html(initial).removeAttr("disabled");

        }

        else{



            //Similary for cancel also....

                    //.....



        }

    });