jQuery 如何在sweetalert上显示加载图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46376638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show loading icon on sweetalert
提问by Iamgisnet
How can I display loading icon or spin while my during ajax call. below is my code
如何在 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");
});
});
Answers will be appreciated.
答案将不胜感激。
采纳答案by tonoslfx
Use the promises, this code reference from the website.
使用承诺，此代码参考来自网站。
https://sweetalert.js.org/guides/#ajax-requests
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();
}
});
回答by Souleste
This has worked best for me.
这对我来说效果最好。
Rather than opening another sweet alert change the content within the sweet alert, otherwise there will be an ugly flash when the sweet alert is trying to change.
而不是打开另一个甜蜜警报改变甜蜜警报中的内容，否则当甜蜜警报试图改变时会有一个难看的闪光。
I add a short amount of time for the loading animation to show, even when the call completes instantly, otherwise there will be an ugly flash there as well...
我添加了一小段时间来显示加载动画，即使调用立即完成，否则那里也会有一个难看的闪光......
$.ajax({
type: 'POST',
url: myurl,
data: str,
//this
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function(e) {
swal_ajax('load');
};
return xhr;
},
//or this
beforeSend: function() {
swal_ajax('load');
},
success: function(json) {
try {
json = JSON.parse(json);
}
catch(error) {
swal_ajax('error');
return false;
}
if(json.success) {
swal_ajax('success');
} else {
swal_ajax('error');
}
},
error: function() {
swal_ajax('error');
return false;
}
});
function swal_ajax(type) {
switch (type) {
case 'load':
swal.fire({
title: '',
html: '<div class="save_loading"><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><div><h4>Save in progress...</h4></div>',
showConfirmButton: false,
allowOutsideClick: false
});
break;
case 'error':
setTimeout(function(){
$('#swal2-content').html('<div class="sa"><div class="sa-error"><div class="sa-error-x"><div class="sa-error-left"></div><div class="sa-error-right"></div></div><div class="sa-error-placeholder"></div><div class="sa-error-fix"></div></div></div><div><h4>An error has occurred; please contact web support for assistance.</h4></div><button class="confirm swal-close" style="display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button>');
}, 1000);
$('.swal-close').on('click', function() { swal.closeModal(); });
break;
case 'success':
setTimeout(function(){
$('#swal2-content').html('<div class="sa"><div class="sa-success"><div class="sa-success-tip"></div><div class="sa-success-long"></div><div class="sa-success-placeholder"></div><div class="sa-success-fix"></div></div></div><div><h4>Save successful!</h4></div>');
}, 1000);
setTimeout(function() {
swal.close(true);
}, 2000);
break;
}
}
Here is an example: https://codepen.io/Souleste/pen/RwNdKPY
回答by Vinod Selvin
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....
//.....
}
});
回答by Akbar Noto
Here my answer , just simply add "closeModal:false" on confirm and it'll show loading gif... because in my use case that i run ajax process after confirm. then it'll close automatically since i call another swal :) Hope it'll help someone!
在这里，我的答案，只需closeModal:false在确认时添加“ ”，它就会显示正在加载 gif ……因为在我的用例中，我在确认后运行 ajax 进程。然后它会自动关闭，因为我打电话给另一个 swal :) 希望它会帮助别人！
PS : Using this version https://sweetalert.js.org/guides/
PS：使用这个版本https://sweetalert.js.org/guides/
$(".btn-accept").click(function(){
swal({
....
buttons:{
//here is the magic
confirm : {text:'Telah Saya Terima',className:'sweet-warning',closeModal:false},
cancel : 'Belum'
}
}).then((confirmed)=>{
if(confirmed){
var update = $.ajax({
...
});
update.done(function(data){
if(data['status']=='success'){
swal("Berhasil","Berhasil mengkonfirmasi bahwa Dokumen telah diterima","success").then((ok)=>{
//do anything
});
}else if(data['status']=='failed'){
swal("Gagal",data['msg'],"error");
}
});
}
});
});
回答by Diego Jiménez
From the GitHub doc:
来自 GitHub 文档：
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.
我已经尝试过这个并且效果很好，只需将 setTimeout 函数替换为您的 ajax 请求。
