CODEWITHSUNDEEP
javascriptsyntaxsweetalert
987654321
987654321

Reputation: 1

Sweet Alert Syntax

I am failing to get sweet alert going and i think it has something to do with the syntax. Can someone show me what i should be doing

<!DOCTYPE html>
<html>
 <head>
  <title>Testing</title>
  <script src="dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
 </head>
<body>
<script>
   swal({
     title: 'Confirm',
     text: 'Are you sure to delete this message?',
     type: 'warning',
     showCancelButton: true,
     confirmButtonText: 'Yes, sir',
     cancelButtonText: 'Not at all'
 });
</script>
</body>
</html>

Upvotes: 0

Views: 2852

Answers (2)

Natvarsinh Parmar - bapu
Natvarsinh Parmar - bapu

Reputation: 1138

Just change your code as per below:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>

        <script>
            $(document).ready(function(){

                    Swal.fire({
                        title: 'Success',
                        text: "Your sweet alert successfully worked",
                        type: 'success',
                    });

                });
        </script>

    </head>
    <body>

    </body>
</html>

Upvotes: 0

markyph
markyph

Reputation: 154

Add a button to the html and trigger an onclick event.

e.g. using standard queryselectors

document.querySelector('button#test-1').onclick = function(){
  swal({
    title: 'Confirm',
    text: 'Are you sure to delete this message?',
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, sir',
    cancelButtonText: 'Not at all'
  });
};
<link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet"/>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
<button id="test-1">Show alert</button>

Upvotes: 3

Related Questions