如何使用 Sweet alert

Question

This Is My HTML Code I Have Two Input Button That I Want To Show Sweet Alert When a user Clicks on any Button

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

Script

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

});

Only The First Input Button Shows Sweet Alert, but when I click the second button nothing happens

Answer 1

You were probably using SweetAlert version 2 and your code applies to version 1. This should work:

 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>

Source: Migration from Swal1 to Swal2

Answer 2

Try this

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

Check Fiddle

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

Answer 3

If you want sweet alert on click of any button then change your code like below:

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

Answer 4

You are only selecting the first element that matches 'td.warning input' selector, that's why nothing happens to the second element.

Try querySelectorAll('td.warning input') method. This returns an array and you can loop through the array to set Event Listeners.

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

});


 }

function school(){

  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

The Below examples are taken from https://sweetalert2.github.io/ .

Get the latest version of sweetalter2 from here https://www.bootcdn.cn/limonte-sweetalert2/

Displaying validation error

 <: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>

Display custom 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>