How to run a link after Sweetalert confirmation?

Asked

Viewed 945 times

2

Link

<a onClick="enviaDivida()" href="{{ route("admin.dividas.edit",$divida->id)}}"
class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Enviar">
<i class="la la-send"></i> </a>

Script:

    function enviaDivida(){

    const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false
})

swalWithBootstrapButtons.fire({
  title: 'Deseja realmente enviar os dados para a Central da Cobrar Simples?',
  text: "Atenção os dados serão enviados imediatamente!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Sim, enviar dados da dívida!',
  cancelButtonText: 'Não, cancelar!',
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swalWithBootstrapButtons.fire(
      'Cancelar!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.cancel
  ) {
    swalWithBootstrapButtons.fire(
      'Processo Cancelado',
      'Nada ocorreu',
      'info'
    )
  }
})
}
javascript sweetalert

  • As well as "run a link"?

  • Type in the URL have href="/exluir/cliente/3" , when I open the SweetAlert I want to put it in the part where you confirm the deletion so you can run the delete

  • Okay, but you want to redirect the page to the URL that is in href?

  • That, at the url inside href

  • If you redirect when confirming, it makes no sense to open another alert confirming that something happened, because the page will be redirected and the user won’t even be able to read the alert.

  • Come on, when you click on the link containing the url href="/exluir/cliente/3" Swal will open, right? At this point the user will decide whether to cancel or confirm the "delete", whether to confirm is redirected.

  • Actually the term is not redirect, but rather the execution of the url that after this does the redirect by the backend controller.

Show 2 more comments

1 answer

2


The if (result.value) { will be satisfied if Sweetalert is confirmed. Then just take the value of the href and redirect with location.href:

function enviaDivida(e){
   e.preventDefault();

    const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false
})

swalWithBootstrapButtons.fire({
  title: 'Deseja realmente enviar os dados para a Central da Cobrar Simples?',
  text: "Atenção os dados serão enviados imediatamente!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Sim, enviar dados da dívida!',
  cancelButtonText: 'Não, cancelar!',
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swalWithBootstrapButtons.fire(
      'Cancelar!',
      'Your file has been deleted.',
      'success'
    )
    location.href = e.target.href;
  } else if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.cancel
  ) {
    swalWithBootstrapButtons.fire(
      'Processo Cancelado',
      'Nada ocorreu',
      'info'
    )
  }
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
<a onClick="enviaDivida(event)" href="./"
class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Enviar">
<i class="la la-send"></i>Deletar</a>

Send on onclick the event as a parameter for the function:

onClick="enviaDivida(event)"

If you want to apply a click on the link, just change the line location.href = e.target.href; for:

$(e.target).removeAttr("onclick");
e.target.click();

  • Here is presented at console.log(e.target.href); undefined, is however redirecting the content of href present undefined

  • Put the event in the onClick="enviaDivida(event)"?

  • Yes, I’m putting it,

  • In the example the answer works right.

  • Brother, I solved here . I passed another parameter in the function to be able to get the url by var url = (document.getElementById(id).getAttribute("href")); that way it worked.

  • 1

    Thank you so much for your willingness to help. Hugs.

Show 1 more comment

Browser other questions tagged javascript sweetalert

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