CODEWITHSUNDEEP
javascriptjquerysweetalert
Mohammad
Mohammad

Reputation: 247

How To Use Sweet alert

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

Upvotes: 8

Views: 86769

Answers (9)

VINOD SUTHAR
VINOD SUTHAR

Reputation: 1

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





js------------

$(document).ready(function () {
    // Adding a click event listener to all buttons with class sweet-5
    $('.sweet-5').on('click', function () {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: {
                cancel: {
                    text: "No, cancel plx!",
                    value: null,
                    visible: true,
                    className: "btn-secondary",
                    closeModal: true
                },
                confirm: {
                    text: "Yes, delete it!",
                    value: true,
                    visible: true,
                    className: "btn-danger",
                    closeModal: true
                }
            }
        }).then((isConfirm) => {
            if (isConfirm) {
                swal("Deleted!", "Your imaginary file has been deleted!", "success");
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });
    });
});

Upvotes: -1

user8234870
user8234870

Reputation:

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>

Upvotes: 0

Surbhi priya
Surbhi priya

Reputation: 1

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

Upvotes: 0

Natvarsinh Parmar - bapu
Natvarsinh Parmar - bapu

Reputation: 1138

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

Upvotes: 2

Ervin
Ervin

Reputation: 131

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/[email protected]/dist/sweetalert2.all.js"></script>

Source: Migration from Swal1 to Swal2

Upvotes: 13

Hoja
Hoja

Reputation: 1207

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/

Upvotes: 4

Scholar Alliance
Scholar Alliance

Reputation: 1

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

Upvotes: 0

Richie
Richie

Reputation: 586

with sweet alert it is more easy for example i fave a link what i need is to call onclick function and make sure i included sweetalser.css and sweetalert.min.js i hope this will work for you 

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

Upvotes: 1

Adi
Adi

Reputation: 6354

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.

Upvotes: 0

Related Questions