2016-12-15 7 views
1

Я использую SweetAlert с Symfony, и я хочу, чтобы пользователь подтвердил, прежде чем завершить действие удаления.Sweet Alert не ждет пока пользователь нажимает ok

Что происходит, когда пользователь нажимает кнопку удаления, SweetAlert появляется, а затем исчезает сразу, и элемент удален.

Я не хочу, чтобы элемент удалялся до тех пор, пока пользователь не наберет ok из SweetAlert.

Вот мои настройки.

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> 

Как сделать удаления ждать действия до тех пор, пока пользователь не нажмет ОК?

EDIT: Я в конечном итоге с помощью $.post и переместил href к data-, как это:

<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

Это не имеет никакого отношения к Symfony. Вы должны предотвратить поведение браузера по умолчанию (возвращая false onclick i.e.) – Brewal

+0

Итак, я изменил свой onclick на это: 'myFunction(); return false; 'и он ничего не удаляет. Я могу щелкнуть ok, но он не удаляет. – iamthestreets

+0

Где вы читаете, что sweetalert позволяет вам удалять что-нибудь? Это просто простая функция js alert, прекрасно выглядящая оболочка. Вы можете добавить ajax-вызов к вашей функции 'isConfirm', чтобы удалить действие в вашем сервере Symfony. – malcolm

ответ

-1

Гораздо проще решением будет добавить функцию непосредственно в onclick так:

<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> 

Я использую это, и он будет идти только по маршруту, если вы нажмете ok. Это просто -> Простой код.

EDIT # 2

Что делать, если вы измените функцию следующим образом:

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

Любая разница?

+0

Да, это работает для меня, но я использую SweetAlert. Я не хочу использовать стандартное оповещение JS. – iamthestreets

+0

Я новичок в SweetAlert. Я понимаю, почему вы можете использовать его. Попробуйте изменить EDIT # 2, добавленное мной. –

+0

Стирает сразу и сразу же закрывает всплывающее окно. Спасибо за вашу помощь. – iamthestreets

0

можно сделать следующим образом:

<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> 

и JS часть, требует JQuery загружен

$(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'); 
       } 
      }); 
     }); 
}); 

Ждать пользователю подтвердить, что вы должны отменить ссылку действия с e.preventDefault();

затем вручную перейти к ссылку после подтверждения пользователя.