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

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;

I can't put my foreach Select Option in JS

Hi can someone help me put my foreach result in my JS add row function.
I'm Using Codeigniter that will pass the data from controller to view.
So I have SELECT in VIEW that will give results of my foreach particulars in my OPTIONS.
<td class="form-group">
<select class="form-control" name="subparticulars[<?php echo $x; ?>]" id="subparticulars<?php echo $x; ?>">
<option value="">Select Particulars</option>
<?php foreach ($particularsData as $particulars)
{
?>
// FOR EACH RESULTS INSIDE THE OPTIONS
<option value="<?php echo $particulars['feetype_id']; ?>"> <?php echo $particulars['feetype_name']; ?> </option>
<?php
}
?>
</select>
</td>
So the the Modal Form Select Option will look like this.
Now let's move to my Add Row Function in my JS where if you click Add Row Button on the top right side it will add new identical rows.
function addPaymentRow()
{
var tableLength = $("#addSubPaymentTable tbody tr").length;
var tableRow;
var arrayNumber;
var count;
if(tableLength > 0) {
tableRow = $("#addSubPaymentTable tbody tr:last").attr('id');
arrayNumber = $("#addSubPaymentTable 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;
}
// I NEED HELP HERE, I CAN ADD ROWS with no foreach value just plain input type, HOW CAN I ADD VALUES HERE FROM FOR EACH
var tr = '<tr id="row'+count+'" class="'+arrayNumber+' appended-exp-row">'+
'<td class="form-group">'+
'<select class="form-control" name="subparticulars['+count+']" id="subparticulars'+count+'">'+
'<option value="">Select Particulars</option>'+
'</select>'+
'</td>'+
'<td class="form-group">'+
'<input type="text" class="form-control" name="subpaymentbalance['+count+']" id="subpaymentbalance'+count+'"/>'+
'</td>'+
'<td class="form-group">'+
'<input type="text" class="form-control" name="subpaymentamount['+count+']" id="subpaymentamount'+count+'" onkeyup="calculateTotalAmount()" placeholder="Payment Amount" />'+
'</td>'+
'<td class="form-group">'+
'<button type="button" class="btn btn-danger btn-sm" onclick="removePaymentRow('+count+')">Remove</button>'+
'</td>'+
'</tr>';
if(tableLength > 0) {
$("#addSubPaymentTable tbody tr:last").after(tr);
} else {
$("#addSubPaymentTable tbody").append(tr);
}
}
The result of added row will look like this.
Can someone help me populate my options in my JS coming from my foreach like in my VIEW.

Try this:
$('.particulars option').clone() will give you all the options of your main select then you just need to append that to your newly created select.
<td class="form-group">
<select class="form-control particulars" name="subparticulars[<?php echo $x; ?>]" id="subparticulars<?php echo $x; ?>">
<option value="">Select Particulars</option>
<?php foreach ($particularsData as $particulars)
{
?>
// FOR EACH RESULTS INSIDE THE OPTIONS
<option value="<?php echo $particulars['feetype_id']; ?>"> <?php echo $particulars['feetype_name']; ?> </option>
<?php
}
?>
</select>
function addPaymentRow()
{
var tableLength = $("#addSubPaymentTable tbody tr").length;
var tableRow;
var arrayNumber;
var count;
if (tableLength > 0) {
tableRow = $("#addSubPaymentTable tbody tr:last").attr('id');
arrayNumber = $("#addSubPaymentTable 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;
}
// I NEED HELP HERE, I CAN ADD ROWS with no foreach value just plain input type, HOW CAN I ADD VALUES HERE FROM FOR EACH
var tr = '<tr id="row' + count + '" class="' + arrayNumber + ' appended-exp-row">' +
'<td class="form-group">' +
'<select class="form-control" name="subparticulars[' + count + ']" id="subparticulars' + count + '"></select>' +
'</td>' +
'<td class="form-group">' +
'<input type="text" class="form-control" name="subpaymentbalance[' + count + ']" id="subpaymentbalance' + count + '"/>' +
'</td>' +
'<td class="form-group">' +
'<input type="text" class="form-control" name="subpaymentamount[' + count + ']" id="subpaymentamount' + count + '" onkeyup="calculateTotalAmount()" placeholder="Payment Amount" />' +
'</td>' +
'<td class="form-group">' +
'<button type="button" class="btn btn-danger btn-sm" onclick="removePaymentRow(' + count + ')">Remove</button>' +
'</td>' +
'</tr>';
if (tableLength > 0) {
$("#addSubPaymentTable tbody tr:last").after(tr);
} else {
$("#addSubPaymentTable tbody").append(tr);
}
$('.particulars option').clone().appendTo('#subparticulars' + count);
}

How to create html component in javascript

I wanted to create my html component in javascript. Is there any way I can get this div part from javascript function.
My html code
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">
<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>
</body>

This is my Tic for Tac answer.
var myFunction = function(){
var div = document.getElementById("yourId");
var myTable = '<input type="text" id="myInput" +
'onkeyup="myFunction()" title="Type in a name">'+
'<table id="myTable">'+
'<tr class="header"></tr>' +
'<tr><td>Germany</td></tr>'+
'<tr><td>Sweden</td></tr>'+
'<tr><td>UK</td></tr>'+
'<tr><td>Germany</td></tr>'+
'<tr><td>Canada</td></tr>'+
'<tr><td>Italy</td></tr>'+
'<tr><td>UK</td></tr>'+
'<tr><td>France</td></tr>'+
'</table>';
div.innerHTML = myTable;
}

For appending you can use insertAdjacentHTML
Working fiddle
function myFunction(){
var tableStr = `<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>`;
document.getElementById('tableContainer').insertAdjacentHTML('beforeend', tableStr)
}

You can use document.createElement() like:
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
You can refer this link for more details

if you are using jquery,try:
$("#yourdivid").html('Your html code above');
with javascript:
var div1=document.getElementById('yourdivid');
div1.innerHTML='Your html code above';

jQuery: this is an example from my code, the var html just makes sure u don't have to write the same piece of code over and over again.
var html = '<div class="swiper-slide">';
html += '<div class="bigIm"><a href="' + url1 + '" target="_blank" class="inner" style="background-image: url(' + img1 + ')">';
html += '<div class="imgCont-b imgCont-b-cov1">';
html += '<i class="fa fa-' + d1.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d1.source + '</span>';
html += '<p>' + d1.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '<div class="bigIm">';
html += '<div class="half first"><a href="' + url2 + '" target="_blank" class="inner" style="background-image: url(' + img2 + ')">';
html += '<div class="imgCont-b imgCont-b-cov2">';
html += '<i class="fa fa-' + d2.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d2.source + '</span>';
html += '<p>' + d2.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '<div class="half last"><a href="' + url3 + '" target="_blank" class="inner" style="background-image: url(' + img3 + ')">';
html += '<div class="imgCont-b imgCont-b-cov3">';
html += '<i class="fa fa-' + d3.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d3.source + '</span>';
html += '<p>' + d3.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '</div>';
html += '</div>';
$('.s1 .swiper-wrapper').append(html);
Hope this helps, keep in mind that this code was meant for a website I made, so ur gonna have to change it a bit.

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);
}
});
});