How to use Sweet Alert before deleting Mysql lines

Asked

Viewed 2,644 times

1

I’m trying to use the sweet alert to confirm the intention to delete a row from the Mysql table, but I don’t think I know how to do it.

Using the alert simple do like this:

<a title='Remover linha' class= 'deletrow' href='deletrow.php?id=$id'><i class='fa fa-remove resultsfa5'></i></a>

In the archive deletrow.php is Mysql to delete the line and before deleting JS asks for confirmation:

$('.deletrow').on('click', function () {
    return confirm('Tem certeza que deseja apagar esta linha?');
});

But trying with the sweet alert doesn’t work, because when I put the href within the tag <a> (without the href works) it just flashes on the screen.

In this fiddle can reproduce the problem. Just take the href from inside the tag that already works, or just blinks... but then how to point to the file where is the query mysql?

Below is the functional snippet (with button):

      document.querySelector('.sweet-1').onclick = function(){
        swal("Nice alert!");
      };
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<link href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css" rel="stylesheet"/>
      <div class="row">
        <div class="col-sm-2 text-center">
          <p><button class="btn btn-primary sweet-1">Abrir alert</button></p>
        </div>
      </div>

So how can I use it with <a href...>, or, even using with <button> where I include the rule to delete the line?

jquery twitter-bootstrap
  • 1

    I use the bootstrap modal itself for these cases, passing the deleted element id on the link to a hidden modal input, where I can cancel or accept the deletion. Would also address your problem?

  • @adrianosymphony, thanks, but I want to use sweet alert same. The answer below solved. Thanks.

  • 1

    OK, but just out of curiosity is an example dynamically http://jsbin.com/vasoforowe/1/edit?html,js,output

  • @adrianosymphony is the one I’m using! ^^

1 answer

2


You can create a function that passes the ID as parameter and by clicking the "OK" button it redirects to the delete page! As below:

function confirmExcluir(id)
{
  swal({
      title: "Excluir",
      text: "Confirma a exclusão?",
      type: "error",
      showCancelButton: false,
      confirmButtonClass: 'btn-success',
      confirmButtonText: 'OK!',
      closeOnConfirm: false
   }, function () {
      window.location.href = 'deletrow.php?id=' + id;   
   });
}

And in html it looks like this:

<a title='Remover linha' class='deletrow' onclick="confirmExcluir($id)" href='javascript:;'><i class='fa fa-remove resultsfa5'></i></a>

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.