处理完一个jQuery确认框后，打开多个jQuery复选框

Question

我有一个API调用，在这里我得到响应的数组。现在我想通过逐个循环响应来打开jQueryConfirm，但问题是，它们同时打开。这是代码

axios.post('/orders/ask-for-order-price', {ids: order_ids}).then((response) => {
if (response.status === 200) {
let orders = response.data
$.each(orders, function (index, item) {
if (item.ask_for_price === true) {
showPricePopup(index, item.address, item.order_type, item.client_name)
}
})
}
}).catch((error) => {
console.info(error)
})

showPricePopup = (id, address, type, client_name) => {
$.confirm({
title: 'Please enter order price for ',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label><strong>' + type + '</strong> at <strong>' + address + '</strong> by <strong>' + client_name + '</strong></label>' +
'<input type="text" placeholder="Enter the price here" class="price form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var price = this.$content.find('.price').val();
if (!price) {
$.alert('provide a valid price');
return false;
}
$.alert('Your price is ' + price);
}
},
cancel: function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});
}

EDITresponse.data看起来像这个

{
"1": {
"ask_for_price": true,
"order_type": "Construction New",
"address": "3685  Simons Hollow Road, Hanover Township, PA",
"created_at": "03/16/20",
"client_name": "Muhammad Ahmad Baig",
},
"2": {
"ask_for_price": true,
"order_type": "Phase I",
"address": "4744  Horizon Circle, University Place, WA",
"created_at": "03/16/20",
"client_name": "Muhammad Ahmad Baig",
},
"3": {
"ask_for_price": true,
"order_type": "ETS",
"address": "1491  Gambler Lane, ALLENDALE, IL",
"created_at": "03/16/20",
"client_name": "Muhammad Ahmad Baig",
},
"4": {
"ask_for_price": true,
"order_type": "Property Condition Assesment",
"address": "58  Glenview Drive, Corpus Christi, TX",
"created_at": "03/16/20",
"client_name": "Muhammad Ahmad Baig",
},
"5": {
"ask_for_price": true,
"order_type": "Property Condition Assesment (Short Form)",
"address": "858  Duncan Avenue, Scarsdale, NY",
"created_at": "03/16/20",
"client_name": "Muhammad Ahmad Baig",
},
"6": {
"ask_for_price": true,
"order_type": "Plan and Cost Review",
"address": "3116  Wolf Pen Road, Pacifica, CA",
"created_at": "03/16/20",
"client_name": "Muhammad Ahmad Baig",
},
}

Answer 1

如果希望弹出窗口按顺序显示，则需要将for循环与promise结合使用。原因是你想等待一个弹出窗口被驳回(这将解决承诺(，然后再进入下一个：

for (const key of Object.keys(orders)) {
const item = orders[key];
// We show popup sequentially, and wait for it to be resolved before moving on to the next
await showPricePopup(index, item.address, item.order_type, item.client_name);
}

注意：要使此功能正常工作，请确保.then()中的回调是async函数，即.then(async (response) => { ... })。

这就引出了下一步：showPricePopup应该返回一个承诺：您可以简单地将函数的整个内部内容包装为：

showPricePopup = (id, address, type, client_name) => {
return new Promise(resolve => {
// Original logic inside the function
});
}

然后，确保在(1(成功提交表格或(2(表格被驳回时，您解决了承诺。然后，解析promise将导致for循环中的await结束，从而允许我们在下一次迭代中打开下一项的模态。

因此，更新后的代码应该是这样的：

axios.post('/orders/ask-for-order-price', {
ids: order_ids
}).then(async (response) => {
if (response.status === 200) {
let orders = response.data;
// Use for loop to iterate through all orders
// In each iteration, await promise returned by `showPricePopup()`
for (const key of Object.keys(orders)) {
const item = orders[key];
await showPricePopup(index, item.address, item.order_type, item.client_name);
}
}
}).catch((error) => {
console.info(error)
})
showPricePopup = (id, address, type, client_name) => {
return new Promise((resolve) => {
$.confirm({
title: 'Please enter order price for ',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label><strong>' + type + '</strong> at <strong>' + address + '</strong> by <strong>' + client_name + '</strong></label>' +
'<input type="text" placeholder="Enter the price here" class="price form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var price = this.$content.find('.price').val();
if (!price) {
$.alert('provide a valid price');
return false;
}
$.alert('Your price is ' + price);
// Resolve your promise here so you can move on to the next one
resolve();
}
},
cancel: function () {
// If the modal is closed, you also want to resolve the promise
resolve();
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});
});
}