jquery 如何在sweetalert上显示加载图标

t5fffqht 于 2023-06-22 发布在 jQuery

关注(0)|答案(6)|浏览(153)

我怎么能显示加载图标或旋转，而我在 AJAX 调用。下面是我的代码

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

如有答复，将不胜感激。

jquery

来源：https://stackoverflow.com/questions/46376638/how-to-show-loading-icon-on-sweetalert

6条答案

按热度按时间

jdzmm42g1#

这对我来说效果最好。
以前是这样的：
而不是打开另一个甜蜜提醒，改变甜蜜提醒内的内容，否则当甜蜜提醒试图改变时，将出现难看的闪光。
值得庆幸的是，这个issue已经在9.8.2版本中解决了。
现在前面的问题已经解决了，我们可以 AJAX 调用中打开新的甜蜜的警报模式，而不会出现丑陋的闪光。
您也可以在swal.fire()周围放置setTimeout，以防止模态之间的难看过渡，如下所示：

// this way when the ajax call completes quickly, the loader will still be shown for a bit
setTimeout(function() {
    swal.fire({
        icon: 'success',
        html: '<h5>Success!</h5>'
    });
}, 500);

// the loader html
var sweet_loader = '<div class="sweet_loader"><svg viewBox="0 0 140 140" width="140" height="140"><g class="outline"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="rgba(0,0,0,0.1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g class="circle"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="#71BBFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="200" stroke-dasharray="300"></path></g></svg></div>';

$.ajax({
    type: 'POST',
    url:  myurl,
    data: str,
    // here
    beforeSend: function() {
        swal.fire({
            html: '<h5>Loading...</h5>',
            showConfirmButton: false,
            onRender: function() {
                 // there will only ever be one sweet alert open.
                 $('.swal2-content').prepend(sweet_loader);
            }
        });
    },
    success: function(json) {
        try {
            json = JSON.parse(json);
        }
        catch(error) {
            swal.fire({
                icon: 'error',
                html: '<h5>Error!</h5>'
            });
            return false;
        }
        if(json.success) {
            swal.fire({
                icon: 'success',
                html: '<h5>Success!</h5>'
            });
        } else {
            swal.fire({
                icon: 'error',
                html: '<h5>Error!</h5>'
            });
        }
    },
    error: function() {
        swal.fire({
            icon: 'error',
            html: '<h5>Error!</h5>'
        });
        return false;
    }
});

看看这个codepen的例子。
显然，你也可以使用下面的显示真实的进度，但我没有测试过。

xhr: function() {
    var xhr = $.ajaxSettings.xhr();
    xhr.upload.onprogress = function(e) {
        // progressive loader
    };
    return xhr;
},

赞(0）回复(0）举报 2023-06-22

biswetbf2#

使用promises，此代码参考自网站。
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();
  }
});

赞(0）回复(0）举报 2023-06-22

vzgqcmou3#

简单的例子工作与最后甜蜜的警报

$('#form_button_submit').click(function(){

            swal({
                title:"", 
                text:"Loading...",
                icon: "https://www.boasnotas.com/img/loading2.gif",
                buttons: false,      
                closeOnClickOutside: false,
                timer: 3000,
                //icon: "success"
            });
            

        });

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>


<button type="submit" id="form_button_submit">
        TEST LOAD
</button>

赞(0）回复(0）举报 2023-06-22

rjee0c154#

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....
                    //.....

        }
    });

赞(0）回复(0）举报 2023-06-22

66bbxpm55#

Sweetalert（版本1）有这个内置的，只需使按钮禁用，它将显示一个加载图标，而不是你的确认文本。
jQuery <1.9

$('.sa-button-container button').attr('disabled', true);

jQuery 1.9+

$('.sa-button-container button').prop('disabled', true);

赞(0）回复(0）举报 2023-06-22

fjnneemd6#

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

我已经试过了，效果很好，只需要用你 AJAX 请求替换setTimeout函数。

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 如何在sweetalert上显示加载图标

6条答案

相关问题

热门标签

最新问答