How to create html component in javascript - 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.

Related

Reiterate through classes inside a class inside a div jquery

Suppose I have the following structure:
<div id="table">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">c</div>
</div>
</div>
How do I reiterate through them in a way that I create the same structure but with <table> instead of <div id="table">, <tr> instead of <div class="row"> and <td> with the content of the div instead of <div class="cell">;
I tried doing something like
let topics_table = '<table>'
$('#table > .row').each(function(){
topics_table += '<tr>'
$(this + ' .cell').each(function(that){
topics_table += '<td>' + that.text() + '</td>'
})
topics_table += '</tr>';
})
topics_table += '</table>`
But I get an error...
$(this + ' .cell')
Should be
$(this).find('.cell')
// or
$('.cell', this)
You're trying to concatenate a string to a DOM Element.
.each(function(that){
topics_table += '<td>' + that.text() + '</td>'
})
^^ that is also an issue, because jQuery passes the index in as the first argument, not the element.
.each(function(index, that){
topics_table += '<td>' + that.innerText + '</td>'
})

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;

append table to another div | JS jQuery

JSFiddle Here
I have 2 div in HTML
The first div for the folder column.
<div class="columnFolder-container"></div>
The second div for the column table. with class ._zTable
<div class = "_zTable"> </ div>
Then in javascript, I have 1 variable (var div =)
which includes 1 div (class="folder") inside the div contains the table with id="exTable".
I want the table to be moved into ._zTable and not in the div class .folder.
Because I want the div .folder in the column folder.
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span' +
'<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>' +
'</div>';
You will need to split your variable into two.
I notice your table is inside your .folder div. I presume that shouldn't be the case.
The variables are then:
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span></div>'
var table = '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>';
Then the code to put these in the right divs is:
document.getElementsByClassName("columnFolder-container")[0].innerHTML=div;
document.getElementsByClassName("_zTable")[0].innerHTML=table;
or with jquery:
$('.columnFolder-container').first().html(div);
$('._zTable').first().html(table);
Using Jquery :
`$(document).ready(function() {
$('#exTable').appendTo('.columnFolder-container');
});`

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

Categories