Как использовать подтверждение (затем отправить) с помощью сладкого оповещения?

У меня есть таблица, в которой каждая строка имеет кнопку удаления с этой формой

<form id="tableDelete_1">
 <input type="hidden" name="tipo" value="delete" />
 <input type="submit" name="send" value="Delete" class="btn btn-danger btn-xs" onClick="return confirm(`Are you sure?`)" />
</form>

<form id="tableDelete_2">
 <input type="hidden" name="tipo" value="delete" />
 <input type="submit" name="send" value="Delete" class="btn btn-danger btn-xs" onClick="return confirm(`Are you sure?`)" />
</form>

Тогда это внизу страницы

$(document).on('submit', '[id^=tableDelete_]' , function() { 
 return callAjax( $(this).serialize() ); 
});

function callAjax( data ) {
  $.ajax({
   type : 'POST',
   url  : 'call/page.php',
   data : data,
   success :  function(data) { ... },
   error: function(data) { ... }
  });
  return false;
 };

Теперь я хочу удалить классический

onClick="return confirm(`Are you sure?`)"

и используйте sweetalert... У меня проблема только при запуске, когда я хочу показать только всплывающее окно с этой функцией

$(document).on('submit', '[id^=tableDelete_]' , function() { 
 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!",
  closeOnConfirm: false
 },
 function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
 });
};

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

Пожалуйста, помогите мне


person FireFoxII    schedule 23.11.2016    source источник


Ответы (3)


Если я правильно прочитал, я думаю, вы ищете что-то подобное?

$(document).on('submit', '[id^=tableDelete_]', function (e) {
  e.preventDefault();

  var data = $(this).serialize();

  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) {
        $.ajax({
          type: 'POST',
          url: 'call/page.php',
          data: data,
          success: function (data) {
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
          },
          error: function (data) {
            swal("NOT Deleted!", "Something blew up.", "error");
          }
        });
      } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
      }
    });

  return false;
});
person Jeff McCloud    schedule 23.11.2016
comment
С e.preventDefault() всплывающее окно не отображается... Хорошо, с возвратом false! И спасибо за остальные функции - person FireFoxII; 23.11.2016

SweetAlert использует promise для обратного вызова подтверждения:

swal({
      title: "Confirm?",
      text: "Are you sure?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Confirm",
      cancelButtonText: "Back"
      }
    ).then(
      function (isConfirm) {
        if (isConfirm) {
          console.log('CONFIRMED');
        }
      },
      function() {
         console.log('BACK');
      }
    );
person DeividSilva    schedule 16.11.2017

$(document).on('submit', '[id^=tableDelete_]' , function(e) { 
e.preventDefault();
//do your popup stuff
return false
});

Вам необходимо предотвратить событие по умолчанию, которое происходит, когда происходит событие (передается как e).

person Jonas Wilms    schedule 23.11.2016
comment
С e.preventDefault() всплывающее окно не отображается... Без этого, но с возвратом false я решаю проблему! - person FireFoxII; 23.11.2016
comment
Довольно интересно - person Jonas Wilms; 23.11.2016