如何使用 Sweet Alert 在 Rails 中发送 ajax DELETE 请求?
How to use Sweet Alert to send ajax DELETE request in Rails?
问题1:当我点击link时,sweet alert modal弹出一瞬间,消失,然后重定向到路由。不确定为什么模式只在它应该停留直到选择选项时才闪烁。我需要用户确认是或否才能删除帐户。如果否则取消,如果是则重定向到路由。
问题 2:通过查看此 doc 我也了解到,为了在 Sweet Alert 中使用 DELETE 方法,我必须使用 ajax 请求。不确定要在 url 中放入什么,因为我正在使用带有 DELETE 方法的 rails 路由,以便让 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');
}
})
});
});
比我想象的要简单。使用 form_tag 并在 jQuery 中使用 $(this).parents('form');
如果您尝试通过 id 抓取表单来提交,它将无法工作。不需要使用 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.");
}
});
});
问题1:当我点击link时,sweet alert modal弹出一瞬间,消失,然后重定向到路由。不确定为什么模式只在它应该停留直到选择选项时才闪烁。我需要用户确认是或否才能删除帐户。如果否则取消,如果是则重定向到路由。
问题 2:通过查看此 doc 我也了解到,为了在 Sweet Alert 中使用 DELETE 方法,我必须使用 ajax 请求。不确定要在 url 中放入什么,因为我正在使用带有 DELETE 方法的 rails 路由,以便让 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');
}
})
});
});
比我想象的要简单。使用 form_tag 并在 jQuery 中使用 $(this).parents('form');
如果您尝试通过 id 抓取表单来提交,它将无法工作。不需要使用 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.");
}
});
});