2016-12-15 9 views
1

Ich benutze SweetAlert mit Symfony und möchte, dass der Benutzer bestätigt, bevor eine Löschaktion abgeschlossen wird.Sweet Alert wartet nicht, bis der Benutzer auf OK klickt

Wenn der Benutzer auf die Schaltfläche zum Löschen klickt, wird der SweetAlert angezeigt und verschwindet sofort und der Artikel wurde gelöscht.

Ich möchte nicht, dass das Element gelöscht wird, bis der Benutzer im SweetAlert-Popup auf ok klickt.

Hier ist mein Setup.

JS:

function myFunction() { 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this Job Title!", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false, 
      closeOnCancel: false 
     }, function (isConfirm) { 
      if (isConfirm){ 
       swal("Deleted!", "Job Title has been deleted.", "success"); 
      } else { 
       swal("Cancelled", "Job Title was not deleted.", "error"); 
      } 
     }); 
    }; 

HTML:

<a href="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" onclick="myFunction()" class="btn btn-white" data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete"> 
    <i class="fa fa-trash"></i> 
</a> 

Wie kann ich die Löschaktion warten zu lassen, bis der Benutzer auf OK klickt?

EDIT: Ich landete mit $.post und zog die href zu einem data- wie folgt aus:

<a href="#" onclick="myFunction(this)" data-url="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" class="btn btn-white" data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete"> 
                   <i class="fa fa-trash"></i> 
                  </a> 
function myFunction(btn) { 
     var url = $(btn).data('url'); 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this Job Title!", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false 
     }, function() { 
      $.post(url, function(){ 
       swal("Deleted!", "Job Title has been deleted.", "success"); 
       $(btn).parents('tr').remove(); 
      }); 
     }); 
    }; 
+1

Es hat nichts mit Symfony zu tun. Sie müssen das Verhalten des Standard-Browsers verhindern (indem Sie false onclick d. H. Zurückgeben) – Brewal

+0

Also änderte ich meinen onclick zu diesem: 'myFunction(); return false; 'und es wird nichts gelöscht. Ich kann klicken, ok, aber es löscht nicht. – iamthestreets

+0

Wo hast du gelesen, dass du mit sweetalert alles löschen kannst? Es ist einfach js Alert-Funktion gut aussehende Wrapper. Sie können Ihrer 'isConfirm'-Funktion einen AJAX-Aufruf hinzufügen, um Aktionen in Ihrem Symfony-Backend zu löschen. – malcolm

Antwort

-1

Eine viel einfachere Lösung ist die Funktion direkt in der onclick wie so hinzuzufügen:

<a href="{{ path('setup_jobtitles_delete', {'id': jobTitle.id}) }}" 
    onclick="return confirm('are u sure?')" class="btn btn-white" 
    data-toggle="tooltip" data-toggle="tooltip" data-placement="top" title="Delete"> 
    <i class="fa fa-trash"></i> 
</a> 

Ich benutze dies und es wird nur auf die Route gehen, wenn Sie auf OK klicken. Es ist einfach -> Halten Sie Ihren Code einfach.

EDIT # 2

Was passiert, wenn Sie Ihre Funktion wie so ändern:

function myFunction() { 
    swal({ 
     title: "Are you sure?", 
     text: "You will not be able to recover this Job Title!", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, delete it!", 
     closeOnConfirm: false 
    }, function() { 
     swal("Deleted!", "Job Title has been deleted.", "success"); 
    }); 
}; 

Jeder Unterschied?

+0

Ja, das funktioniert für mich, aber ich benutze SweetAlert. Ich möchte den Standard-JS-Alert nicht verwenden. – iamthestreets

+0

Ich bin neu bei SweetAlert. Ich kann sehen, warum Sie es vielleicht verwenden möchten. Versuchen Sie die EDIT # 2 Änderung, die ich hinzufügte. –

+0

Löscht sofort und schließt das Popup sofort. Danke für deine Hilfe. – iamthestreets

0

Sie wie folgt tun:

<a href="/delete/me" class="confirm" data-title="Want to delete this?" data-type="warning">Click me</a> 

<a href="/edit/me" class="confirm" data-title="Info image" data-type="info">Click me</a> 

und JS Teil erfordern jquery

geladen
$(function() { 
    $('a.confirm').click(function (e) { 
      e.preventDefault(); 
      var tthis = $(this); 
      swal({ 
       title: "Are you sure?", 
       text: $(this).data('title'), 
       type: $(this).data('type'), 
       showCancelButton: true, 
       confirmButtonText: "Yes", 
       cancelButtonText: "No", 
      }, function (isConfirm) { 
       if (isConfirm) { 
        document.location.href = tthis.attr('href'); 
       } 
      }); 
     }); 
}); 

Um Benutzer zu warten bestätigen Sie Link-Aktion mit e.preventDefault();

dann gehen manuell abbrechen müssen Link sobald der Nutzer bestätigt hat.

Verwandte Themen