how to add sweetalert pop-up messages in html with jascript

Question

I'm trying to set the sweetalert pop-up messages while clicking the edit button .

here is the sample code:

<td><a href="/control/edituser/{{Values.id}}" onclick='a' class="btn btn-info">Edit</a></td>

script:

<script>
$('a').click(function(e){
e.preventDefault();
var link = $(this).attr('href');

swal({
    title: "Are you sure?",
    text: "By clicking 'OK' you will be redirected to the link.",
    type: "warning",
    showCancelButton: true
},
function(){
    window.location.href = link;
});
});
</script>

Answer 1

There're a few gotchas about your code mate. First off, is why are you using onclick='a' when you have not defined a function and instead relied on jQuery to detect the click event? Either use jQuery or trigger a function call using onClick.

Second thing is that you need to check for confirmation in order to trigger your desired action.

<td><a href="/control/edituser/{{Values.id}}" class="btn btn-info">Edit</a></td>

<script>
  $('a').click(function(e) {
    e.preventDefault();
    var link = $(this).attr('href');

    swal({
        title: 'Are you sure?',
        text: "By clicking 'OK' you will be redirected to the link.",
        type: 'warning',
        showCancelButton: true
      },function(isConfirm){
        if (isConfirm){
          window.location.href = link;
        } else {
          // Handle rejection
        }
      });
    });
  </script>

Further reading:

How to use confirm using sweet alert?

Using an HTML button to call a JavaScript function

Answer 2

You are using deprecated options in your code(type, showCancelButton etc).

I would recommend you to give class for edit buttons/id if you only have one.

Bind click event on it via jQuery and use then() method for swal.

Example:

<a href="/" class="editButton">edit</a>

And javascript:

var $editButton = $('.editButton');

$editButton.on('click', function(e) {

  e.preventDefault();

  swal({
      title: 'Are you sure?',
      text: 'By clicking \'OK\' you will be redirected to the link.',
      icon: 'warning',
      buttons: {
          cancel: true,
          confirm: true
      }
  }).then(function(value) {
      if (value) {
          //  Either true or null
          window.location.href = "https://www.stackoverflow.com";
      }
  });

});

Inline example

If you want to do it inline, then add onclick attribute to your element and send url via it:

<a href="/" class="editButton" onclick="foo(event, 'https://www.stackoverflow.com');">edit</a>

And javascript:

function foo(event, url) {

    event = event || window.event;
    event.preventDefault();

    swal({
        title: 'Are you sure?',
        text: 'By clicking \'OK\' you will be redirected to the link.',
        icon: 'warning',
        buttons: {
            cancel: true,
            confirm: true
        }
    }).then(function(value) {
        if (value) {
            //  Either true or null
            window.location.href = url;
        }
    });
}