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>

score 2 · Answer 1 · answered Mar 23 '18 at 12:30

2

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

answered Mar 23 '18 at 12:30

Harry Adel

1,238
11
16

Care to explain what's happening? – Harry Adel Mar 26 '18 at 08:10
i copy and paste the code in my template.but,it showing edit page without giving alert. – me text Mar 26 '18 at 08:48
can you give the cdn for sweetalert and javscript – me text Mar 26 '18 at 08:50
@metext a quick google search would yield you the results you're looking for. – Harry Adel Mar 26 '18 at 10:47
same i copy and paste. – me text Mar 26 '18 at 10:49

Roland Ruul · Answer 2 · 2018-03-26T12:46:05.387

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

i' using this url /control/edituser/{{Values.id}} in window.location.href . — me text, Mar 26 '18 at 07:29
I made inline example. Pass your url via onclick attribute and then use it in window redirect. — Roland Ruul, Mar 26 '18 at 12:46

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

2 Answers2