Страница не ожидает ответа от окна подтверждения SweetAlert

Я пытаюсь обновить действие JavaScript confirm(), чтобы использовать SweetAlert. В настоящее время мой код выглядит примерно так:

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

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

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


Все, что я пробовал, не помогло. Когда отображается первое предупреждение, страница удаляется и обновляется еще до того, как пользователь нажимает кнопки предупреждения. Как заставить страницу ждать ввода пользователя?

Любая помощь будет принята с благодарностью.


javascript sweetalert
person dmeehan    schedule 16.01.2015    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Вы не можете использовать это как замену confirm. confirm блокирует один поток выполнения до тех пор, пока диалог не будет подтвержден, вы не можете создать такое же поведение с диалогом на основе JavaScript/DOM.

Вам необходимо отправить запрос /delete.php?id=100 в обратном вызове success для окна оповещения.

Вместо...

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

Тебе нужно

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

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

Вы также должны исправить delete.php, чтобы принимать только POST запросов. Разрешить GET запросы на удаление ресурсов — огромная проблема. В первый раз, когда Google или любой другой поисковый робот находит вашу страницу, он просматривает href каждой ссылки в вашем документе и переходит по каждой ссылке, удаляя все ваше содержание. Их не остановит поле confirm, поскольку они, вероятно (за исключением Google), не будут оценивать какой-либо JavaScript.

person meagar    schedule 16.01.2015
comment
Спасибо за совет относительно GET/POST. Я добавил в ваше решение, и оно работает нормально. Меня бросило использование одинарных и двойных кавычек. У меня был атрибут onClick с использованием двойных кавычек, поэтому любые двойные кавычки внутри него испортили его. - person dmeehan; 16.01.2015

arrow_upward
5
arrow_downward

Вы можете сделать это таким образом.

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

Кажется взломом, но он работает для меня.

person Abdelhakim AKODADI    schedule 31.03.2016
comment
Спасибо, сэр ! :D - person Baptiste Arnaud; 18.08.2016

arrow_upward
0
arrow_downward

Вот пример в директиве Angular (поскольку SweetAlert предлагается через оболочку директивы angular). Это один из «элегантных» способов сделать это в JavaScript. В событии клика есть e.stopImmediatePropagation(), затем, если пользователь подтверждает, он оценивает функцию «ng-click». (Обратите внимание, что scope.$eval не является JavaScript eval()).

Разметка: <i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>

Простая директива «подтвердить клик»:

/**
 * 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
            }
          });
        });
      }
    }
  }
]);
person ryanm    schedule 04.11.2016

arrow_upward

arrow_downward

person    schedule
comment
добавить немного пояснений к вашему ответу? - person HaveNoDisplayName; 17.05.2015