如何使用 Sweet alert

Question

這是我的 HTML 代碼 我有兩個輸入按鈕，我想在用戶單擊任何按鈕時顯示 Sweet Alert

<tr class="examples odd" id="UserId_1" role="row">
   <td class="sorting_1">1</td>
   <td>admin</td><td>Mohammad</td>
   <td>Farzin</td><td class="warning"><input type="button"
   value="Delete" class="sweet-5" id="btn_Delete1"></td>
</tr>
<tr class="examples even" id="UserId_5" role="row">
   <td class="sorting_1">2</td>
   <td>11</td><td>11</td>
   <td>11</td><td class="warning"><input type="button" value="Delete" class="sweet-5"
   id="btn_Delete5"></td>
</tr>   

腳本

$(document).ready(function () {
document.querySelector('td.warning input').onclick = function () {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn-danger',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
        },
     function (isConfirm) {
        if (isConfirm) {
            swal("Deleted!", "Your imaginary file has been deleted!", "success");
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });
    };

});

只有第一個輸入按鈕顯示 Sweet Alert，但是當我單擊第二個按鈕時沒有任何反應

Answer 1

您可能使用的是SweetAlert 版本 2，並且您的代碼適用於版本 1。這應該可以工作：

 swal({ title: 'Are you sure?', text: 'Some text.', type: 'warning', showCancelButton: true, confirmButtonColor: '#DD6B55', confirmButtonText: 'Yes!', cancelButtonText: 'No.' }).then(() => { if (result.value) { // handle Confirm button click } else { // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer' } });

 <script src="https://unpkg.com/sweetalert2@7.8.2/dist/sweetalert2.all.js"></script>

資料來源： 從 Swal1 到 Swal2 的遷移

Answer 2

嘗試這個

$(document).ready(function () {
  $('body').on('click', 'td.warning input', function () {
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: 'btn-danger',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
      },
      function (isConfirm) {
        if (isConfirm) {
          swal("Deleted!", "Your imaginary file has been deleted!", "success");
        } else {
          swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
      });
  });
});

檢查小提琴

http://jsfiddle.net/hoja/5a6x3m36/5/

Answer 3

如果您想單擊任何按鈕時發出甜蜜警報，請更改您的代碼，如下所示：

$(document).ready(function(){
  $(document).on('click', 'button', function(){
    Swal.fire({     
       type: 'success',
       title: 'Your work has been done',
       showConfirmButton: false,
       timer: 1500
    })
  });
});

Answer 4

您只選擇了與'td.warning input'選擇器匹配的第一個元素，這就是為什么第二個元素沒有任何反應的原因。

嘗試querySelectorAll('td.warning input')方法。 這將返回一個數組，您可以遍歷該數組以設置事件偵聽器。

Answer 5

使用甜蜜警報更容易，例如我喜歡一個鏈接，我需要調用onclick函數並確保我包含了sweetalser.css和sweetalert.min.js我希望這對你sweetalert.min.js

<a onclick="sweetAlert('Greetings', 'Hi', 'error');" class="" data-toggle="modal" href='#modale-id'><i class="fa fa-fw fa-plus"></i>Streams</a>

Answer 6

window.onload=function()

{

  swal({   title: "PopOutTitle",   text: "Your FIRST Name:",   type: "input",   showCancelButton: true, OnConfirm:school();  
         animation: "slide-from-top",     inputPlaceholder: name }, function(inputValue){   if (inputValue === false) return false;
         if (inputValue === "") { swal.showInputError("You need to write something!"); return false } 
           document.getElementById("name").innerHTML=inputValue || "Unknown";

});


 }

函數學校（）{

  swal({   title: "PopOutTitle",   text: "Your last Name:",   type: "input",   showCancelButton: true,   
         animation: "slide-from-top",     inputPlaceholder: name }, function(inputValue){   if (inputValue === false) return false;
         if (inputValue === "") { swal.showInputError("You need to write something!"); return false } 
           document.getElementById("name").innerHTML=inputValue || "Unknown";

});**I want to show multiple swal popout so I want to call the school function when Ok Button is clicked. How can I do this?**

Answer 7

<script>
$(document).ready(function(){
  $('.btn-danger').on("click", function(){
swal({
title: "Delete?",
text: "Please ensure and then confirm!",
type: "warning",
showCancelButton: !0,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
reverseButtons: !0
}).then(function (e) {
if (e.value === true) {
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    var id = $('.btn-danger').attr('data-id');
    var cur_row = this;
    $.ajax({
    type: 'POST',
    url: "{{url('/product_delete')}}/" + id,
    data: {_token: CSRF_TOKEN},
    dataType: 'JSON',
    success: function (results) {
    if (results.success === true)
    {
        swal("Done!", results.message, "success");
        setTimeout(function(){
                   location.reload()
                }, 2000);
    } 
    else
    {
        swal("Error!", results.message, "error");
    }
    }
    });
}
    });
  });
});
</script>

/* Add link in head section */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

Answer 8

以下示例取自https://sweetalert2.github.io/ 。

從這里獲取最新版本的sweetalter2 https://www.bootcdn.cn/limonte-sweetalert2/

顯示驗證錯誤

 <:DOCTYPE html> <html> <head> <title>Testing</title> <script src="https.//cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.7.0/sweetalert2.all.js"></script> </head> <body> <script> Swal:fire({ icon, 'error': title, 'Validation Error:,:'? text: 'Passwords Did not Match!', footer: '<a href="">Why do I have this issue?</a>' }) </script> </body> </html>

顯示自定義 html

 <:DOCTYPE html> <html> <head> <title>Testing</title> <script src="https.//cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.7.0/sweetalert2.all.js"></script> </head> <body> <script> Swal:fire({ title, '<strong>HTML <u>example</u></strong>': icon, 'info': html, 'You can use <b>bold text</b>. ' + '<a href="//sweetalert2.github,io">links</a> ' + 'and other HTML tags': showCloseButton, true: showCancelButton, true: focusConfirm, false: confirmButtonText, '<i class="fa fa-thumbs-up"></i> Great:', confirmButtonAriaLabel, 'Thumbs up: great,': cancelButtonText: '<i class="fa fa-thumbs-down"></i>', cancelButtonAriaLabel: 'Thumbs down' }) </script> </body> </html>