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;

Save Button on a Table in Javascript Not Working

I have this javascript which will allow a user to hit the edit button on a table and edit the content. They can then press save to save the new input. I want to do 4 things which I don't know how to do.
I want to remove the border from the input box after the edit button has been pressed and then the save button is pressed.
Once the save button is pressed I want the Edit, Save, and Delete Button to go back to the same format they were at before pressing Edit.
I want the select picker to be read only when the edit button has not been clicked.
Instead of Having the words "Edit","Save" and "Delete" I want to use font awesome icons.
I have uploaded the JS, CSS, and HTML code here.
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var chore = document.getElementById("chore_row" + no);
var duration = document.getElementById("duration_row" + no);
var chore_data = chore.innerHTML;
var duration_data = duration.innerHTML;
chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}
function save_row(no) {
var chore_val = document.getElementById("chore_text" + no).value;
var duration_val = document.getElementById("duration_text" + no).value;
var rotation_val = document.getElementById("rotation_text" + no).value;
document.getElementById("chore_row" + no).innerHTML = chore_val;
document.getElementById("duration_row" + no).innerHTML = duration_val;
document.getElementById("rotation_row" + no).innerHTML = rotation_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = document.getElementById("new_chore").value;
var new_duration = document.getElementById("new_duration").value;
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row'" + table_len + "'>" +
"<select class='selectpicker1'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
" <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
" </td>" +
"</tr>";
document.getElementById("new_chore").value = "";
document.getElementById("new_duration").value = "";
document.getElementById("new_rotation").value = "";
}
input {
background-color: #fff1d9;
border: solid;
border-color: #fea680;
}
.pageButton {
border: none;
}
<section class="Chores">
<table id="ChoreTbl" class="choreHead">
<h1><b>Chore Setting</b></h1>
<thead>
<tr class="header" style="color:#008f95;">
<td id="name_row2"><b>Chore</b></td>
<td id="country_row2"><b>Time Frame to Complete</b></td>
<td id="age_row2"><b>Rotation Cycle</b></td>
<td></td>
</thead>
<tbody>
<tr id="row1">
<td id="chore_row1">Wash Floor</td>
<td id="duration_row1">3 days</td>
<td id="rotation_row1">
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit pageButton" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save pageButton" onclick="save_row('1')">
<input type="button" value="Delete" class="delete pageButton" onclick="delete_row('1')">
</td>
</tr>
<tr>
<td><input type="text" id="new_chore"></td>
<td><input type="text" id="new_duration"></td>
<td>
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
</tr>
</tbody>
</table>

Here you go you can use the following.
$(document).ready(function() {
$("select").attr('disabled', true);
});
function edit_row(no) {
$("select").attr("disabled", false);
$("edit_button" + no).show();
$("save_button" + no).show();
//document.getElementById("edit_button"+no).style.display="none";
//document.getElementById("save_button"+no).style.display="block";
var chore = document.getElementById("chore_row" + no);
var duration = document.getElementById("duration_row" + no);
var chore_data = chore.innerHTML;
var duration_data = duration.innerHTML;
chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}
function save_row(no) {
$("input[type='text']").css({
border: 0
});
$("#edit_button" + no).show();
var chore_val = $("chore_text" + no).value;
var duration_val = $("#duration_text" + no).val();
var rotation_val = $("#rotation_text" + no).val();
$("#chore_row" + no).html(chore_val);
$("#duration_row" + no).html(duration_val);
$("#rotation_row" + no).html(rotation_val);
$("#edit_button" + no).show();
$("#save_button" + no).show();
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = document.getElementById("new_chore").value;
var new_duration = document.getElementById("new_duration").value;
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row'" + table_len + "'>" +
"<select class='selectpicker1'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
" <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
" </td>" +
"</tr>";
document.getElementById("new_chore").value = "";
document.getElementById("new_duration").value = "";
document.getElementById("new_rotation").value = "";
}
There are several errors in your code, so i revised it but the chore_text name input is not defined and i cant figure out why are you using it so i commented out the lines involved with that input, but the things you addressed are here you can see, just one thing I could not get your 2nd point the buttons that you want to switch back to the previous layout. They never change or maybe I am not getting what you said, I have commented out the portions for you to fix that are buggy, but the problem you are concerned I have added the solution.
$(document).ready(function() {
$("select").attr('disabled', true);
});
function edit_row(no) {
$("#selectpicker" + no).attr("disabled", false);
$("#save_button" + no).show();
var chore = $("#chore_row" + no);
var duration = $("#duration_row" + no);
var chore_data = chore.html();
var duration_data = duration.html();
chore.html("<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>");
duration.html("<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>");
$("input[type='text']").css({
border: 0
});
}
function save_row(no) {
var chore_val = $("#chore_text" + no).val();
var duration_val = $("#duration_text" + no).val();
var rotation_val = $("#rotation_text" + no).val();
$("#chore_row" + no).html(chore_val);
$("#duration_row" + no).html(duration_val);
$("#rotation_row" + no).html(rotation_val);
$("#edit_button" + no).show();
//$("#save_button" + no).hide();
$("#selectpicker" + no).attr("disabled", true);
}
function delete_row(no) {
// $("#row" + no + "").clone().wrap('<p>').parent().html('');
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = $("#new_chore").val();
var new_duration = $("#new_duration").val();
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row" + table_len + "'>" +
"<select disabled class='selectpicker1' id='selectpicker" + table_len + "'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><i id='edit_button" + table_len + "' class='fa fa-pencil' onclick='edit_row(" + table_len + ")'></i> " +
" <i id='save_button" + table_len + "' class='fa fa-floppy-o' onclick='save_row(" + table_len + ")'></i> " +
" <i class='fa fa-trash' onclick='delete_row(" + table_len + ")'></i>" +
" </td>" +
"</tr>";
$("#new_chore").val();
$("#new_duration").val();
//document.getElementById("new_rotation").value = "";
}
input {
background-color: #fff1d9;
border: solid;
border-color: #fea680;
}
.pageButton {
border: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="Chores">
<table id="ChoreTbl" class="choreHead">
<h1><b>Chore Setting</b></h1>
<thead>
<tr class="header" style="color:#008f95;">
<td id="name_row2"><b>Chore</b></td>
<td id="country_row2"><b>Time Frame to Complete</b></td>
<td id="age_row2"><b>Rotation Cycle</b></td>
<td></td>
</thead>
<tbody>
<tr id="row1">
<td id="chore_row1">Wash Floor</td>
<td id="duration_row1">3 days</td>
<td id="rotation_row1">
<select class="selectpicker1" id="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td>
<i id="edit_button1" class="fa fa-pencil" onclick="edit_row('1')"></i>
<i id="save_button1" class="fa fa-floppy-o" onclick="save_row('1')"></i>
<i class="fa fa-trash" onclick="delete_row('1')"></i>
</td>
</tr>
<tr>
<td><input type="text" id="new_chore"></td>
<td><input type="text" id="new_duration"></td>
<td>
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
</tr>
</tbody>
</table>

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

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