Как использовать Sweet Alert для отправки ajax-запроса DELETE в Rails?

Проблема 1: Когда я нажимаю на ссылку, на долю секунды всплывает милое модальное предупреждение, затем исчезает и перенаправляет на маршрут. Не уверен, почему модальное окно мигает только тогда, когда оно должно оставаться до тех пор, пока не будет выбран вариант. Мне нужно, чтобы пользователь подтвердил да или нет, чтобы удалить учетную запись. Если нет, то отменить, если да, то перенаправить на маршрут.

Как использовать Sweet Alert для отправки ajax-запроса DELETE в Rails?

Проблема 2: Глядя на этот документ, я также понял, что для использования метода DELETE в Sweet Alert мне нужно использовать запрос ajax. Не знаю, что указать в URL-адресе, так как я использую маршрут rails с методом DELETE, чтобы заставить ajax перенаправить на этот маршрут для удаления учетной записи.

Любая помощь приветствуется. Работаем над этим уже два дня.

Редактировать: Rails версии 4.2.4, Sweet Alert версии 1

<%= link_to 'Delete Account',registration_path(current_user), method: :delete, data: { behavior: 'delete' } %>



$("[data-behavior='delete']").on('click', function (e) {
      e.preventDefault();

  swal ({
      title: 'Are you sure?',
      text: 'You will not be able to recover your account!',
      icon: 'warning',
      buttons: [ 'Yes', 'No']
  }).then(isNo => {
  if (isNo) return;
      $.ajax({
        url: $(this).attr('href'),
        dataType: "JSON",
        method: "DELETE",
        success: ()=> {
            swal('Deleted!', 'Your account has been deleted.', 'success');
        }
      })
    });
  });
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Оказался проще, чем я думал. Используйте form_tag, а в jQuery используйте $(this).parents('form'); Если вы попытаетесь захватить форму по идентификатору для отправки, это не сработает. Не нужно было использовать AJAX.

HTML

<%= form_tag(registration_path(current_user), { method: :delete, id: "deleteForm" }) do %>
  <button id = "delete" type = "submit"><i class = "fa fa-trash"></i>Delete Account</button>
<% end %>

jQuery

 $('#delete').on('click', function (e) {
          e.preventDefault();
          var form = $(this).parents('form');
          swal ({
              title: 'Are you sure?',
              text: 'You will not be able to recover your account!',
              icon: 'warning',
              closeModal: false,
              allowOutsideClick: false,
              closeOnConfirm: false,
              closeOnCancel: false,
              buttons: [ 'No', 'Yes']
          }).then((willDelete) => {
              if (willDelete) {
                  swal("Your account has been deleted!", {
                      icon: "success",
                  });
                  form.submit();
              } else {
                  swal("Your account is safe.");
              }
          });
      });

Другие вопросы по теме