我使用 railsform_with作為遠程表單。在提交之前，我想顯示一個帶有動態訊息的自定義確認框。確實確認框后，我想最終提交表格。我想出了 'ajax:beforeSend' 事件處理程式：
const form = document.getElementById('assign_sessions_to_employees')
form.addEventListener(
'ajax:beforeSend',
(event) => {
event.preventDefault();
swal.fire({
title: 'Are you sure ?',
text: `You are about to spend ${expectedExpenditure()} credits.`,
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
console.log('submitting')
Rails.fire(form, 'submit');
}
})
}
)
這作業正常，但是當我運行時Rails.fire(form, 'submit');，當我最終想要提交表單時，此重新觸發'ajax:beforeSend'并且我陷入回圈中。
使用 form_with 和 rails ujs 實作這種行為的正確方法是什么？
uj5u.com熱心網友回復：
如果您使用函式宣告（又名命名函式），您可以使用EventTarget.removeEventListener()洗掉事件處理程式：
function handleConfirmation(event){
let form = event.target;
event.preventDefault();
swal.fire({
title: 'Are you sure ?',
text: `You are about to spend ${expectedExpenditure()} credits.`,
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
console.log('submitting');
form.removeEventListener('ajax:beforeSend', handleConfirmation);
Rails.fire(form, 'submit');
}
})
}
}
const form = document.getElementById('assign_sessions_to_employees')
form.addEventListener('ajax:beforeSend', handleConfirmation);
另一種選擇是在您的事件處理程式中設定一個資料屬性：
const form = document.getElementById('assign_sessions_to_employees')
form.addEventListener(
'ajax:beforeSend',
(event) => {
if (event.target.dataset.confirmed) { return };
event.preventDefault();
swal.fire({
title: 'Are you sure ?',
text: `You are about to spend ${expectedExpenditure()} credits.`,
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
console.log('submitting');
form.dataset.confirmed = true;
Rails.fire(form, 'submit');
}
})
}
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/314942.html