We Keep Coding

Dynamically add a table row with a bootstrap selectpicker

I'm trying to dynamically add a table row. one of the td's has a bootstrap select picker field. when I add the class select picker in JavaScript the field does not render the field, when i remove the class the select field renders without the search input. i would like the select to be rendered as a bootstrap select picker rather than a plain select field
function addRow() {
$("#addRowBtn").button("loading");
var tableLength = $("#productTable tbody tr").length;
var tableRow;
var arrayNumber;
var count;
if (tableLength > 0) {
tableRow = $("#productTable tbody tr:last").attr("id");
arrayNumber = $("#productTable tbody tr:last").attr("class");
count = tableRow.substring(3);
count = Number(count) + 1;
arrayNumber = Number(arrayNumber) + 1;
} else {
// no table row
count = 1;
arrayNumber = 0;
}
$.ajax({
url: "php_action/fetchProductData.php",
type: "post",
dataType: "json",
success: function (response) {
$("#addRowBtn").button("reset");
var tr =
'<tr id="row' +
count +
'" class="' +
arrayNumber +
'">' +
"<td>" +
'<div class="form-group">' +
'<div class="search_select">' +
'<select class="form-control" data-live-search="true" name="productName[]" id="productName' +
count +
'" onchange="getProductData(' +
count +
')" >' +
'<option value="">~~SELECT~~</option>';
// console.log(response);
$.each(response, function (index, value) {
tr += '<option value="' + value[0] + '">' + value[1] + "</option>";
});
tr +=
"</select>" +
"</div>" +
"</div>" +
"</td>" +
'<td style="padding-left:20px;"">' +
'<input type="text" name="rate[]" id="rate' +
count +
'" autocomplete="off" disabled="true" class="form-control" />' +
'<input type="hidden" name="rateValue[]" id="rateValue' +
count +
'" autocomplete="off" class="form-control" />' +
'</td style="padding-left:20px;">' +
'<td style="padding-left:20px;">' +
'<div class="form-group">' +
'<input type="number" name="quantity[]" id="quantity' +
count +
'" onkeyup="getTotal(' +
count +
')" autocomplete="off" class="form-control" min="1" />' +
"</div>" +
"</td>" +
'<td style="padding-left:20px;">' +
'<input type="text" name="total[]" id="total' +
count +
'" autocomplete="off" class="form-control" disabled="true" />' +
'<input type="hidden" name="totalValue[]" id="totalValue' +
count +
'" autocomplete="off" class="form-control" />' +
"</td>" +
"<td>" +
'<button class="btn btn-default removeProductRowBtn" type="button" onclick="removeProductRow(' +
count +
')"><i class="glyphicon glyphicon-trash"></i></button>' +
"</td>" +
"</tr>";
if (tableLength > 0) {
$("#productTable tbody tr:last").after(tr);
} else {
$("#productTable tbody").append(tr);
$(".search_select").selectpicker("refresh");
}
}, // /success
}); // get the product data
} // /add row
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="productTable">
<thead>
<tr>
<th style="width:40%;">Product</th>
<th style="width:20%;">Rate</th>
<th style="width:15%;">Quantity</th>
<th style="width:15%;">Total</th>
<th style="width:10%;"></th>
</tr>
</thead>
<tbody>
<?php
$arrayNumber = 0;
for ($x = 1; $x < 4; $x++) { ?>
<tr id="row<?php echo $x; ?>" class="<?php echo $arrayNumber; ?>">
<td style="margin-left:20px;">
<div class="form-group">
<select class="form-control selectpicker" data-live-search="true"
name="productName[]" id="productName<?php echo $x; ?>"
onchange="getProductData(<?php echo $x; ?>)">
<option value="">~~SELECT~~</option>
<?php
$productSql = "SELECT * FROM product WHERE active = 1 AND status = 1 AND quantity != 0";
$productData = $connect->query($productSql);
while ($row = $productData->fetch_array()) {
echo "<option value='" . $row['product_id'] . "' id='changeProduct" . $row['product_id'] . "'>" . $row['product_name'] . "</option>";
} // /while
?>
</select>
</div>
</td>
<td style="padding-left:20px;">
<input type="text" name="rate[]" id="rate<?php echo $x; ?>" autocomplete="off"
disabled="true" class="form-control" />
<input type="hidden" name="rateValue[]" id="rateValue<?php echo $x; ?>"
autocomplete="off" class="form-control" />
</td>
<td style="padding-left:20px;">
<div class="form-group">
<input type="number" name="quantity[]" id="quantity<?php echo $x; ?>"
onkeyup="getTotal(<?php echo $x ?>)" autocomplete="off" class="form-control"
min="1" />
</div>
</td>
<td style="padding-left:20px;">
<input type="text" name="total[]" id="total<?php echo $x; ?>" autocomplete="off"
class="form-control" disabled="true" />
<input type="hidden" name="totalValue[]" id="totalValue<?php echo $x; ?>"
autocomplete="off" class="form-control" />
</td>
<td>
<button class="btn btn-default removeProductRowBtn" type="button"
id="removeProductRowBtn" onclick="removeProductRow(<?php echo $x; ?>)"><i
class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
<?php
$arrayNumber++;
} // /for
?>
</tbody>
</table>

i had to change the class of the field being rendered in javascript and render the element using the knew class name
function addRow() {
$("#addRowBtn").button("loading");
var tableLength = $("#productTable tbody tr").length;
var tableRow;
var arrayNumber;
var count;
if (tableLength > 0) {
tableRow = $("#productTable tbody tr:last").attr("id");
arrayNumber = $("#productTable tbody tr:last").attr("class");
count = tableRow.substring(3);
count = Number(count) + 1;
arrayNumber = Number(arrayNumber) + 1;
} else {
// no table row
count = 1;
arrayNumber = 0;
}
$.ajax({
url: "php_action/fetchProductData.php",
type: "post",
dataType: "json",
success: function (response) {
$("#addRowBtn").button("reset");
var tr =
'<tr id="row' +
count +
'" class="' +
arrayNumber +
'">' +
"<td>" +
'<div class="form-group">' +
'<div class="search_select">' +
'<select class="form-control sele" data-live-search="true" name="productName[]" id="productName' +
count +
'" onchange="getProductData(' +
count +
')" >' +
'<option value="">~~SELECT~~</option>';
// console.log(response);
$.each(response, function (index, value) {
tr += '<option value="' + value[0] + '">' + value[1] + "</option>";
});
tr +=
"</select>" +
"</div>" +
"</div>" +
"</td>" +
'<td style="padding-left:20px;"">' +
'<input type="text" name="rate[]" id="rate' +
count +
'" autocomplete="off" disabled="true" class="form-control" />' +
'<input type="hidden" name="rateValue[]" id="rateValue' +
count +
'" autocomplete="off" class="form-control" />' +
'</td style="padding-left:20px;">' +
'<td style="padding-left:20px;">' +
'<div class="form-group">' +
'<input type="number" name="quantity[]" id="quantity' +
count +
'" onkeyup="getTotal(' +
count +
')" autocomplete="off" class="form-control" min="1" />' +
"</div>" +
"</td>" +
'<td style="padding-left:20px;">' +
'<input type="text" name="total[]" id="total' +
count +
'" autocomplete="off" class="form-control" disabled="true" />' +
'<input type="hidden" name="totalValue[]" id="totalValue' +
count +
'" autocomplete="off" class="form-control" />' +
"</td>" +
"<td>" +
'<button class="btn btn-default removeProductRowBtn" type="button" onclick="removeProductRow(' +
count +
')"><i class="glyphicon glyphicon-trash"></i></button>' +
"</td>" +
"</tr>";
if (tableLength > 0) {
$("#productTable tbody tr:last").after(tr);
$(".sele").selectpicker("render");
} else {
$("#productTable tbody").append(tr);
$(".sele").selectpicker("render");
}
}, // /success
}); // get the product data
} // /add row

Multiplying inputs with dynamic add

I have 3 fields with inputs:
<div class="row">
<input onblur="calc_basic_amount();" id="rate_basic"></input>
<input onblur="calc_basic_amount();" id="qty_basic"></input>
<input id="basic_amount"></input>
</div>
Multiply rate_basic by qty_basic with js:
function calc_basic_amount(){
var qty_basic = document.getElementById('qty_basic').value;
var rate_basic = document.getElementById('rate_basic').value;
var basic_amount = (qty_basic * rate_basic);
document.getElementById('basic_amount').value = basic_amount.toFixed(2);
}
It works fine, but I have a button that add a row with the same inputs and the same id, but the calculation only works with the first row. How to make it work with all inputs? thanks
Add function to row:
function add_row_to_table() {
table_row += '<td><input id="qty_basic" type="number" min="0" onblur="calc_basic_amount();" onchange="calc_basic_amount();" data-quantity name="newitems[' + item_key + '][qty]" value="' + data.qty + '" class="form-control">';
table_row += '<input type="text" placeholder="' + app.lang.unit + '" name="newitems[' + item_key + '][unit]" class="form-control input-transparent text-right" value="' + data.unit + '" >';
table_row += '</td>';
table_row += '<td class="rate"><input id="rate_basic" type="number" data-rate data-toggle="tooltip" title="' + app.lang.item_field_not_formatted + '" onblur="calc_basic_amount();" data-rate onchange="calc_basic_amount();" name="newitems[' + item_key + '][rate]" value="' + data.rate + '" class="form-control"></td>';
table_row += '<td class="amount_basic" align="right"><input id="basic_amount" class="form-control"></td>';
table_row += '<td><i class="fa fa-trash"></i></td>';
table_row += '</tr>';
}

You should add dynamic id
<div class="row">
<input onblur="calc_basic_amount(1);" id="rate_basic1"></input>
<input onblur="calc_basic_amount(1);" id="qty_basic1"></input>
<input id="basic_amount1"></input>
</div>
Now when you create New Row
<div class="row">
<input onblur="calc_basic_amount(2);" id="rate_basic2"></input>
<input onblur="calc_basic_amount(2);" id="qty_basic2"></input>
<input id="basic_amount2"></input>
</div>
function calc_basic_amount(id){
var qty_basic = document.getElementById('qty_basic'+id).value;
var rate_basic = document.getElementById('rate_basic'+id).value;
var basic_amount = (qty_basic * rate_basic);
document.getElementById('basic_amount'+id).value = basic_amount.toFixed(2);
}
https://codepen.io/flakerimi/pen/xxgVpWR
I have simplified a bit but you get the idea.
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
function addRow() {
currentNum = rowCount+1;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input onblur="calc_basic_amount('+currentNum+');" id="rate_basic'+currentNum+'" />';
cell2.innerHTML = '<input onblur="calc_basic_amount('+currentNum+');" id="qty_basic'+currentNum+'"/>';
cell3.innerHTML = '<input id="basic_amount'+currentNum+'"/>';
rowCount++;
}
function calc_basic_amount(id){
var qty_basic = document.getElementById('qty_basic'+id).value;
var rate_basic = document.getElementById('rate_basic'+id).value;
var basic_amount = (qty_basic * rate_basic);
document.getElementById('basic_amount'+id).value = basic_amount.toFixed(2);
}
table, td {
border: 1px solid black;
}
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable">
<tr>
<td><input onblur="calc_basic_amount(1);" id="rate_basic1" /></td>
<td><input onblur="calc_basic_amount(1);" id="qty_basic1"/></td>
<td><input id="basic_amount1"/></td>
</tr>
</table>
<br>
<button onclick="addRow()">Create row</button>
<script>
</script>

Input id (autocompletion) with js does'nt work

I would where is my error, inside this js because it does'nt work and the console I don't see nothing about the result input autocompletion for example
If you need more informations, tell me, I will add.
Thank you
Html result version
note :specification_row is an increment and when you add a new row inside the table
look $(document).ready(function() and id="specificationName' + specification_row + '" are the same, but does'nt work.
element of table
<script type="text/javascript"><!--
var specification_row = 3;
$(document).ready(function() {
$("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
{
tokenLimit: 1,
resultsLimit: 5,
onResult: function (results) {
$.each(results, function (index, value) {
value.name = value.id + " " + value.name;
});
return results;
}
});
});
function addSpecificationValue() {
html = '<tr id="specification-row' + specification_row + '">';
//specification_name
html += '<td>';
html += ' <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
html += ' <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
html += '</td>';
//remove
html += ' <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#specification tbody').append(html);
specification_row++;
}
my php code
$content .= '<tr id="specification-row' . $t . '">';
$content .= ' <td>' . HTML::inputField('products_specification[' . $t . '][name]', $specification_name, 'class="form-control token-input" id="specificationName' . $t . '"', null, null, null);
</td>';
$content .= ' </tr>';
$content .= ' </tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td class="text-md-right"><button type="button" onclick="addSpecificationValue();" data-toggle="tooltip" title="' . $this->app->getDef('button_add') . '" class="btn btn-primary"><i class="fas fa-plus-circle"></i></button></td>
</tr>
</tfoot>
</table></td>
</tr>
</table>
';
$products_specification_ajax = OSCOM::link('products_specification_ajax.php');
$output = <<<EOD
<script type="text/javascript"><!--
var specification_row = $t; // increment element
// call token-input js for autocompletion : data list
$(document).ready(function() {
$("#specificationName' + specification_row + '").tokenInput("{$products_specification_ajax}" ,
{
tokenLimit: 1,
resultsLimit: 5,
onResult: function (results) {
$.each(results, function (index, value) {
value.name = value.id + " " + value.name;
});
return results;
}
});
});
-- create new js row with all element
function addSpecificationValue() {
html = '<tr id="specification-row' + specification_row + '">';
html += '<td>';
-- input autocompketion call
html += ' <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
html += ' <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
html += '</td>';
//remove
html += ' <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#specification tbody').append(html);
specification_row++;
}
</script>
EOD;

Jquery function does not work when click is simulated with jquery

I am using Opencart 2.3.0.2 and I am trying to change the html of the order edit page to be in one page layout (By default is with bootstrap tabs).
It looks like it's loading the information for the next tab when you click the button on the previous page to continue.
And when I change it to one page it does not load the information on
document.ready but on click of the button.
I've got the following code:
$('#button-refresh').on('click', function() {
console.log('you've clicked button-refresh');
$.ajax({
url: '<?php echo $catalog; ?>index.php?route=api/cart/products&token=' + token + '&store_id=' + $('select[name=\'store_id\'] option:selected').val(),
dataType: 'json',
crossDomain: true,
success: function(json) {
$('.alert-danger, .text-danger').remove();
// Check for errors
if (json['error']) {
if (json['error']['warning']) {
$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['warning'] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
if (json['error']['stock']) {
$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['stock'] + '</div>');
}
if (json['error']['minimum']) {
for (i in json['error']['minimum']) {
$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['minimum'][i] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
}
}
var shipping = false;
html = '';
console.log(json['products'].length);
if (json['products'].length) {
for (i = 0; i < json['products'].length; i++) {
product = json['products'][i];
html += '<tr>';
html += ' <td class="text-left">' + product['name'] + ' ' + (!product['stock'] ? '<span class="text-danger">***</span>' : '') + '<br />';
html += ' <input type="hidden" name="product[' + i + '][product_id]" value="' + product['product_id'] + '" />';
if (product['option']) {
for (j = 0; j < product['option'].length; j++) {
option = product['option'][j];
html += ' - <small>' + option['name'] + ': ' + option['value'] + '</small><br />';
if (option['type'] == 'select' || option['type'] == 'radio' || option['type'] == 'image') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + ']" value="' + option['product_option_value_id'] + '" />';
}
if (option['type'] == 'checkbox') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + '][]" value="' + option['product_option_value_id'] + '" />';
}
if (option['type'] == 'text' || option['type'] == 'textarea' || option['type'] == 'file' || option['type'] == 'date' || option['type'] == 'datetime' || option['type'] == 'time') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + ']" value="' + option['value'] + '" />';
}
}
}
html += '</td>';
html += ' <td class="text-left">' + product['model'] + '</td>';
html += ' <td class="text-right"><div class="input-group btn-block" style="max-width: 200px;"><input type="text" name="product[' + i + '][quantity]" value="' + product['quantity'] + '" class="form-control" /><span class="input-group-btn"><button type="button" data-toggle="tooltip" title="<?php echo $button_refresh; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"><i class="fa fa-refresh"></i></button></span></div></td>';
html += ' <td class="text-right">' + product['price'] + '</td>';
html += ' <td class="text-right">' + product['total'] + '</td>';
html += ' <td class="text-center" style="width: 3px;"><button type="button" value="' + product['cart_id'] + '" data-toggle="tooltip" title="<?php echo $button_remove; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
if (product['shipping'] != 0) {
shipping = true;
}
}
}
if (!shipping) {
$('select[name=\'shipping_method\'] option').removeAttr('selected');
$('select[name=\'shipping_method\']').prop('disabled', true);
$('#button-shipping-method').prop('disabled', true);
} else {
$('select[name=\'shipping_method\']').prop('disabled', false);
$('#button-shipping-method').prop('disabled', false);
}
if (json['vouchers'].length) {
for (i in json['vouchers']) {
voucher = json['vouchers'][i];
html += '<tr>';
html += ' <td class="text-left">' + voucher['description'];
html += ' <input type="hidden" name="voucher[' + i + '][code]" value="' + voucher['code'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][description]" value="' + voucher['description'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][from_name]" value="' + voucher['from_name'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][from_email]" value="' + voucher['from_email'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][to_name]" value="' + voucher['to_name'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][to_email]" value="' + voucher['to_email'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][voucher_theme_id]" value="' + voucher['voucher_theme_id'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][message]" value="' + voucher['message'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][amount]" value="' + voucher['amount'] + '" />';
html += ' </td>';
html += ' <td class="text-left"></td>';
html += ' <td class="text-right">1</td>';
html += ' <td class="text-right">' + voucher['price'] + '</td>';
html += ' <td class="text-right">' + voucher['price'] + '</td>';
html += ' <td class="text-center" style="width: 3px;"><button type="button" value="' + voucher['code'] + '" data-toggle="tooltip" title="<?php echo $button_remove; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
}
}
if (!json['products'].length && !json['vouchers'].length) {
html += '<tr>';
html += ' <td colspan="6" class="text-center"><?php echo $text_no_results; ?></td>';
html += '</tr>';
}
$('#cart').html(html);
// Totals
html = '';
if (json['products'].length) {
for (i = 0; i < json['products'].length; i++) {
product = json['products'][i];
html += '<tr>';
html += ' <td class="text-left">' + product['name'] + ' ' + (!product['stock'] ? '<span class="text-danger">***</span>' : '') + '<br />';
if (product['option']) {
for (j = 0; j < product['option'].length; j++) {
option = product['option'][j];
html += ' - <small>' + option['name'] + ': ' + option['value'] + '</small><br />';
}
}
html += ' </td>';
html += ' <td class="text-left">' + product['model'] + '</td>';
html += ' <td class="text-right">' + product['quantity'] + '</td>';
html += ' <td class="text-right">' + product['price'] + '</td>';
html += ' <td class="text-right">' + product['total'] + '</td>';
html += '</tr>';
}
}
if (json['vouchers'].length) {
for (i in json['vouchers']) {
voucher = json['vouchers'][i];
html += '<tr>';
html += ' <td class="text-left">' + voucher['description'] + '</td>';
html += ' <td class="text-left"></td>';
html += ' <td class="text-right">1</td>';
html += ' <td class="text-right">' + voucher['amount'] + '</td>';
html += ' <td class="text-right">' + voucher['amount'] + '</td>';
html += '</tr>';
}
}
if (json['totals'].length) {
for (i in json['totals']) {
total = json['totals'][i];
html += '<tr>';
html += ' <td class="text-right" colspan="4">' + total['title'] + ':</td>';
html += ' <td class="text-right">' + total['text'] + '</td>';
html += '</tr>';
}
}
if (!json['totals'].length && !json['products'].length && !json['vouchers'].length) {
html += '<tr>';
html += ' <td colspan="5" class="text-center"><?php echo $text_no_results; ?></td>';
html += '</tr>';
}
$('#total').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
and I tried hacking it by simulating a click when the document load like this:
$(document).ready(function() {
$('#button-refresh').trigger('click');
});
the strange thing is that it works fine when I click the button in the browser, but it gives me error when I try to simulate the click with jquery. The errors is when I am trying to console.log the json['products']. It says:
Uncaught TypeError: Cannot read property 'length' of undefined
at Object.success (index.php?route=sale/order/edit&order_id=18&token=m0x3pTbrP0KbaBKSIQR4Jw4XndGGbrAS:1002)
at j (jquery-2.1.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.1.1.min.js:2)
at x (jquery-2.1.1.min.js:4)
at XMLHttpRequest. (jquery-2.1.1.min.js:4)
EDIT:
one more strange things is that the button does not have id="button-refresh" but it detects it somehow.
the button:
<button type="button" id="button-customer" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"><i class="fa fa-arrow-right"></i> <?php echo $button_continue; ?></button>
and when I tried
$(document).ready(function() {
$('#button-customer').trigger('click');
});
nothing happens.

try document.on click event like below.
$(document).ready(function() {
$(document).on('click', "#button-refresh", function () {
$(this).trigger('click');
});
});

Opencart 2.1.0.2 Custom Option disappears on Edit Order

I'm using Opencart 2.1.0.2.
I have developed a custom option with type=number and name of quantity that reflects the checkbox code. This is working wonderfully. (It adds correctly from the add order button in the administration and from the front of the store)
However, I have noticed that if I go to edit an order with a product, the option type=number at first appears on the #tab-product page, but then disappears once the cart options load.
At First:
Then it Disappears:
Note: "Testing2: 30" is a custom option type=text (name is customprice); and it appears fine and registers within the cart system.
EDIT
I have figured out that the #button-refresh (which is clicked before entering this tab) is not reloading the product options correctly. I have looked through the database and the type is appearing correctly. Below is the code for when #button-refresh is clicked. Any clues as to why it is not reloading the quantity option?
// Add all products to the cart using the api
$('#button-refresh').on('click', function() {
$.ajax({
url: $('select[name=\'store\'] option:selected').val() + 'index.php?route=api/cart/products&token=' + token,
dataType: 'json',
crossDomain: true,
success: function(json) {
$('.alert-danger, .text-danger').remove();
// Check for errors
if (json['error']) {
if (json['error']['warning']) {
$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['warning'] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
if (json['error']['stock']) {
$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['stock'] + '</div>');
}
if (json['error']['minimum']) {
for (i in json['error']['minimum']) {
$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['minimum'][i] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');
}
}
}
var shipping = false;
html = '';
if (json['products'].length) {
for (i = 0; i < json['products'].length; i++) {
product = json['products'][i];
html += '<tr>';
html += ' <td class="text-left">' + product['name'] + ' ' + (!product['stock'] ? '<span class="text-danger">***</span>' : '') + '<br />';
html += ' <input type="hidden" name="product[' + i + '][product_id]" value="' + product['product_id'] + '" />';
if (product['option']) {
for (j = 0; j < product['option'].length; j++) {
option = product['option'][j];
html += ' - <small>' + option['name'] + ': ' + option['value'] + '</small><br />';
if (option['type'] == 'select' || option['type'] == 'radio' || option['type'] == 'image') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + ']" value="' + option['product_option_value_id'] + '" />';
}
if (option['type'] == 'checkbox') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + '][]" value="' + option['product_option_value_id'] + '" />';
}
if (option['type'] == 'quantity' || option['type'] == 'text') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + '][' + option['product_option_value_id'] + ']" value="" />';
}
if (option['type'] == 'textarea' || option['type'] == 'customprice' || option['type'] == 'file' || option['type'] == 'date' || option['type'] == 'datetime' || option['type'] == 'time') {
html += '<input type="hidden" name="product[' + i + '][option][' + option['product_option_id'] + ']" value="' + option['value'] + '" />';
}
}
}
html += '</td>';
html += ' <td class="text-left">' + product['model'] + '</td>';
// html += ' <td class="text-right"><div class="input-group btn-block" style="max-width: 200px;"><input type="text" name="product[' + i + '][quantity]" value="' + product['quantity'] + '" class="form-control" /><span class="input-group-btn"><button type="button" data-toggle="tooltip" title="<?php echo $button_refresh; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"><i class="fa fa-refresh"></i></button></span></div></td>';
html += ' <td class="text-right">' + product['price'] + '</td>';
html += ' <td class="text-right">' + product['total'] + '</td>';
html += ' <td class="text-center" style="width: 3px;"><button type="button" value="' + product['cart_id'] + '" data-toggle="tooltip" title="<?php echo $button_remove; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
if (product['shipping'] != 0) {
shipping = true;
}
}
}
if (!shipping) {
$('select[name=\'shipping_method\'] option').removeAttr('selected');
$('select[name=\'shipping_method\']').prop('disabled', true);
$('#button-shipping-method').prop('disabled', true);
} else {
$('select[name=\'shipping_method\']').prop('disabled', false);
$('#button-shipping-method').prop('disabled', false);
}
if (json['vouchers'].length) {
for (i in json['vouchers']) {
voucher = json['vouchers'][i];
html += '<tr>';
html += ' <td class="text-left">' + voucher['description'];
html += ' <input type="hidden" name="voucher[' + i + '][code]" value="' + voucher['code'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][description]" value="' + voucher['description'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][from_name]" value="' + voucher['from_name'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][from_email]" value="' + voucher['from_email'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][to_name]" value="' + voucher['to_name'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][to_email]" value="' + voucher['to_email'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][voucher_theme_id]" value="' + voucher['voucher_theme_id'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][message]" value="' + voucher['message'] + '" />';
html += ' <input type="hidden" name="voucher[' + i + '][amount]" value="' + voucher['amount'] + '" />';
html += ' </td>';
html += ' <td class="text-left"></td>';
html += ' <td class="text-right">1</td>';
html += ' <td class="text-right">' + voucher['amount'] + '</td>';
html += ' <td class="text-right">' + voucher['amount'] + '</td>';
html += ' <td class="text-center" style="width: 3px;"><button type="button" value="' + voucher['code'] + '" data-toggle="tooltip" title="<?php echo $button_remove; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
}
}
if (!json['products'].length && !json['vouchers'].length) {
html += '<tr>';
html += ' <td colspan="6" class="text-center"><?php echo $text_no_results; ?></td>';
html += '</tr>';
}
$('#cart').html(html);
// Totals
html = '';
if (json['products'].length) {
for (i = 0; i < json['products'].length; i++) {
product = json['products'][i];
html += '<tr>';
html += ' <td class="text-left">' + product['name'] + ' ' + (!product['stock'] ? '<span class="text-danger">***</span>' : '') + '<br />';
if (product['option']) {
for (j = 0; j < product['option'].length; j++) {
option = product['option'][j];
html += ' - <small>' + option['name'] + ': ' + option['value'] + '</small><br />';
}
}
html += ' </td>';
html += ' <td class="text-left">' + product['model'] + '</td>';
// html += ' <td class="text-right">' + product['quantity'] + '</td>';
html += ' <td class="text-right">' + product['price'] + '</td>';
html += ' <td class="text-right">' + product['total'] + '</td>';
html += '</tr>';
}
}
if (json['vouchers'].length) {
for (i in json['vouchers']) {
voucher = json['vouchers'][i];
html += '<tr>';
html += ' <td class="text-left">' + voucher['description'] + '</td>';
html += ' <td class="text-left"></td>';
html += ' <td class="text-right">1</td>';
html += ' <td class="text-right">' + voucher['amount'] + '</td>';
html += ' <td class="text-right">' + voucher['amount'] + '</td>';
html += '</tr>';
}
}
if (json['totals'].length) {
for (i in json['totals']) {
total = json['totals'][i];
html += '<tr>';
html += ' <td class="text-right" colspan="4">' + total['title'] + ':</td>';
html += ' <td class="text-right">' + total['text'] + '</td>';
html += '</tr>';
}
}
if (!json['totals'].length && !json['products'].length && !json['vouchers'].length) {
html += '<tr>';
html += ' <td colspan="5" class="text-center"><?php echo $text_no_results; ?></td>';
html += '</tr>';
}
$('#total').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});