La pagina non è in attesa di risposta da javascript Sweet Alert

Question

Sto tentando di aggiornare la mia javascript confirm() per utilizzare Sweet Alert (http://t4t5.github.io/sweetalert/). Attualmente il mio codice è qualcosa del genere:

<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a> 

Questo attende che l'utente confermi prima di navigare alla pagina di eliminazione. Vorrei utilizzare questo esempio da Sweet Alert di chiedere all'utente di confermare prima di cancellare:

swal({ 
title: "Are you sure?", 
text: "You will not be able to recover this imaginary file!", 
type: "warning", 
showCancelButton: true, 
confirmButtonColor: "#DD6B55", 
confirmButtonText: "Yes, delete it!", 
cancelButtonText: "No, cancel plx!", 
closeOnConfirm: false, 
closeOnCancel: false 
}, 
function(isConfirm){ 
    if (isConfirm) {  
    swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
    } 
    else {  
    swal("Cancelled", "Your imaginary file is safe :)", "error"); 
    } 
}); 

Tutto ciò che ho provato è fallito. Quando viene visualizzato il primo avviso, la pagina è andata avanti e ha eliminato l'elemento e aggiornato prima che l'utente abbia persino fatto clic sui pulsanti di avviso. Come faccio a rendere la pagina in attesa degli input degli utenti?

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Non è possibile utilizzare questo come sostituzione drop-in per confirm. confirm blocca il singolo thread di esecuzione fino a quando la finestra di dialogo non è stata confermata, è possibile che non sia producendo lo stesso comportamento con una finestra di dialogo basata su JavaScript/DOM.

È necessario inviare una richiesta a /delete.php?id=100 nella conferma per la casella di avviso.

Invece di ...

swal("Deleted!", "Your imaginary file has been deleted.", "success"); 

È necessario

<a href="#">Delete<a> 
... 

$.post('/delete.php?id=100').then(function() { 
    swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
}); 

È inoltre necessario risolvere il tuo delete.php per accettare solo POST richieste. È un grosso problema consentire le richieste GET per eliminare le risorse. La prima volta che Google o qualsiasi altro crawler trova la tua pagina, vedrà lo href di ogni link nel tuo documento e seguirà ogni link, eliminando tutti i tuoi contenuti. Non verranno arrestati dal riquadro confirm, poiché probabilmente (ad eccezione di Google) non verranno valutati JavaScript.

Answer 2

$('.delete').click(function() { 
var id = this.id; 
swal({ 
    title: "Are you sure?", 
    text: "Your will not be able to recover this post!", 
    type: "warning", 
    showCancelButton: true, 
    confirmButtonColor: "#DD6B55", 
    confirmButtonText: "Yes, delete it!", 
    closeOnConfirm: false 
}, 
function(){ 
    alert(id); 
}); 
}); 


<a id="<?php echo $row->id_portfolio ?>" class=" delete"> 

Answer 3

Si può fare in questo modo.

HTML:

<a href="/delete.php?id=100" class="confirmation" >Delete</a> 

JS:

$('.confirmation').click(function (e) { 
    var href = $(this).attr('href'); 

    swal({ 
     title: "Are you sure?", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, delete it!", 
     cancelButtonText: "No, cancel plx!", 
     closeOnConfirm: true, 
     closeOnCancel: true 
    }, 
      function (isConfirm) { 
       if (isConfirm) { 
        window.location.href = href; 
       } 
      }); 

    return false; 
}); 

Sembra un hack, ma si sta lavorando per me.

Answer 4

Ecco un esempio in una direttiva Angular (poiché SweetAlert viene offerto tramite un wrapper direttiva angolare). Questo è un metodo 'elegante' per fare ciò in JavaScript. In un evento click, esiste e.stopImmediatePropagation(), quindi se l'utente conferma, valuta la funzione "ng-clic". (Notare l'ambito. $ Eval non è una valutazione JavaScript()).

Markup: <i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>

semplice "conferma cliccare" direttiva:

/** 
* Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?"> 
*/ 
angular.module('myApp.directives').directive('confirmClick', [ 
    'SweetAlert', 
    function (SweetAlert) { 
    return { 
     priority: -1, 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     element.bind('click', function (e) { 
      e.stopImmediatePropagation(); 
      e.preventDefault(); 

      var message = attrs.confirmClick || 'Are you sure you want to continue?'; 

      SweetAlert.swal({ 
      title: message, 
      type: 'warning', 
      showCancelButton: true, 
      closeOnConfirm: true, 
      closeOnCancel: true 
      }, function (isConfirm) { 
      if (isConfirm) { 
       if(attrs.ngClick) { 
       scope.$eval(attrs.ngClick); 
       } 
      } else { 
       // Cancelled 
      } 
      }); 
     }); 
     } 
    } 
    } 
]);