完成一个处理后打开多个 jQuery 个确认框
Open multiple jQuery confirm boxes after processing of one is completed
我有一个 API 调用,我在其中获得数组作为响应。现在我想通过一个一个地循环响应来打开 jQuery Confirm 但问题是,它们是同时打开的。这是代码
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
});
}
});
}
编辑
response.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",
},
}
如果您希望弹出窗口按顺序显示,您将需要结合使用 for
循环和 promises。原因是你想等待一个弹出窗口被关闭(这将解决承诺),然后再继续下一个:
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
应该 return 一个承诺:您可以简单地包装函数的整个内部内容:
showPricePopup = (id, address, type, client_name) => {
return new Promise(resolve => {
// Original logic inside the function
});
}
然后,确保在 (1) 表单成功提交或 (2) 表单被取消时 resolve 承诺。然后解决承诺将导致 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
});
}
});
});
}
我有一个 API 调用,我在其中获得数组作为响应。现在我想通过一个一个地循环响应来打开 jQuery Confirm 但问题是,它们是同时打开的。这是代码
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
});
}
});
}
编辑
response.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",
},
}
如果您希望弹出窗口按顺序显示,您将需要结合使用 for
循环和 promises。原因是你想等待一个弹出窗口被关闭(这将解决承诺),然后再继续下一个:
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
应该 return 一个承诺:您可以简单地包装函数的整个内部内容:
showPricePopup = (id, address, type, client_name) => {
return new Promise(resolve => {
// Original logic inside the function
});
}
然后,确保在 (1) 表单成功提交或 (2) 表单被取消时 resolve 承诺。然后解决承诺将导致 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
});
}
});
});
}