jquery 如何使用甜蜜警报

yws3nbqq  于 2023-01-25  发布在  jQuery
关注(0)|答案(8)|浏览(143)

这是我的HTML代码我有两个输入按钮,我想当用户点击任何按钮时显示甜蜜的警报

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

});

只有第一个输入按钮显示甜蜜的警报,但当我点击第二个按钮什么也没有发生

9jyewag0

9jyewag01#

您可能使用的是SweetAlert version 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>

来源:Migration from Swal1 to Swal2

xsuvu9jc

xsuvu9jc2#

试试这个

$(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/

qvsjd97n

qvsjd97n3#

如果你想甜警报点击任何按钮,然后改变你的代码如下:

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

20jt8wwn4#

使用sweetalert更容易,例如,我喜欢一个链接,我需要的是调用onclick函数,并确保我包括 sweetalser.csssweetalert.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>
9jyewag0

9jyewag05#

您只选择了与'td.warning input'选择器匹配的第一个元素,这就是为什么第二个元素不会发生任何变化。
尝试querySelectorAll('td.warning input')方法。该方法返回一个数组,您可以循环访问该数组以设置事件侦听器。

oewdyzsn

oewdyzsn6#

窗口.onload=函数()
{

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?**
xlpyo6sf

xlpyo6sf7#

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

vsaztqbk8#

以下示例摘自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>

相关问题