2017-09-23 127 views
-1

如何在ajax調用期間顯示加載圖標或旋轉。以下是我的代碼如何在sweetalert上顯示加載圖標

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

將不勝感激。

+0

我從來沒有使用SweetAlert,但檢查網頁(https://sweetalert.js.org)我找不到所有這些方法:HTML,showSpinner,showCancelButton,confirmButtonColor,confirmButtonText,closeOnConfirm ...你是否使用這個插件還是有另一個? –

+0

使用承諾'https:// sweetalert.js.org/guides /#using-promises' – tonoslfx

回答

0

使用承諾,這個代碼參考網站。

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

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函數。

相關問題