Create orders based on a table of menus and condiments
Based on this SO question: https://stackoverflow.com/questions/55770945/how-to-fix-0-value-inserted-in-the-database-in-the-second-request-on-ajax/55771437#55771437
by Sascha
HTML
<table class="table table-hover upsize_check" id="noun_chaining_order" style="border:none;">
<input type="hidden" name="" value="12" id="hidden_customer_id">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Items</th>
<th scope="col">Price</th>
<th>Action</th>
</tr>
</thead>
<tbody style="font-size:14px;" id="tbody_noun_chaining_order">
<tr class="condimentParent">
<td></td>
<td class="parent_item">$5.00 Extra Crispy 2 Piece Box</td>
<td class="total">5.00</td>
<td><button class="removeorderWithCondi btn btn-danger form-control">Delete</button></td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">2</td>
<td class='child_item'>*Standard</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">Yes</td>
<td class="condi_section_id" style="display:none;">3</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">2</td>
<td class='child_item'>*Individual Fries</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">Yes</td>
<td class="condi_section_id" style="display:none;">2</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">1</td>
<td class='child_item'>*Buttery Bread</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">No</td>
<td class="condi_section_id" style="display:none;">4</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">1</td>
<td class='child_item'>*Chocolate Chip Cookie</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">No</td>
<td class="condi_section_id" style="display:none;">5</td>
</tr>
<tr...
CSS
table {
font-family: Verdana, sans-serif;
background: white;
width: 100%;
}
.menu {
background-color: #FEE;
}
JavaScript
// just for fiddle demo
var orderNumber = 358;
var customer_id = $('#hidden_customer_id').val();
$('#add_to_cart').on('click', function() {
// reset
var orders = [];
var menu = undefined;
$('#tbody_noun_chaining_order').children('tr').each(function() {
$row = $(this);
if ($row.hasClass('condimentParent')) {
// store a previous menu to the orders array if exists.
if (menu) {
orders.push(menu);
}
menu = {
'total': $row.find('.total').text(),
'name': $row.find('.parent_item').text(),
'condiments': {
'Item': [],
'Qty': [],
'Total': []
}
};
} else if ($row.hasClass('editCondiments')) {
// row is a condiment, append elements to the previous "menu" variable
menu.condiments.Item.push($row.find('.child_item').text());
menu.condiments.Qty.push($row.find('.condiments_order_quantity').text());
menu.condiments.Total.push($row.find('.total').text());
}
});
if (menu) {
orders.push(menu);
}
storeOrder(orders);
});
function storeOrder(orders) {
for (var num in orders) {
// simulate storing the order
$.ajax('/echo/json', {
type: 'POST',
// as the call is asynchronous, make sure to provide all required reference data along with the call.
context: orders[num].condiments,
data: {
'json': '"' + (orderNumber++) + '"',
'customer_id': customer_id,
'append_customer_noun_order_price': orders[num].total,
'append_customer_noun_order': orders[num].name,
},
success: function(orderNumber) {
if (!isNaN(orderNumber)) {
$.ajax('/echo/json', {
context: orderNumber,
type: 'POST',
data: {
'ParentId': orderNumber,
'Item': this.Item,
'Qty': this.Qty,
'Total': this.Total,
'json': '{"condimentsCount": ' + this.Item.length + '}'
...