Save Button on a Table in Javascript Not Working - javascript

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>

Related

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

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

Dynamic Table Cell Not Sizing Correctly IE/Edge

Using JavaScript to dynamically add/dete/edit rows. The script works fine but the save and delete button appear one below the other when edit button is clicked. This only seems to happen in IE/Edge and works fine in Chrome. Not sure why...?
Javascript
function aedit_row(no)
{
document.getElementById("aedit_button"+no).style.display="none";
document.getElementById("asave_button"+no).style.display="table-cell";
var acode=document.getElementById("acode_row"+no);
var aname=document.getElementById("aname_row"+no);
var acode_data=acode.innerHTML;
var aname_data=aname.innerHTML;
acode.innerHTML="<input type='text' id='acode_text"+no+"' value='"+acode_data+"'>";
aname.innerHTML="<input type='text' id='aname_text"+no+"' value='"+aname_data+"'>";
}
function asave_row(no)
{
var acode_val=document.getElementById("acode_text"+no).value;
var aname_val=document.getElementById("aname_text"+no).value;
document.getElementById("acode_row"+no).innerHTML=acode_val;
document.getElementById("aname_row"+no).innerHTML=aname_val;
document.getElementById("aedit_button"+no).style.display="table-cell";
document.getElementById("asave_button"+no).style.display="none";
}
function adelete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function aadd_row()
{
var new_acode=document.getElementById("new_acode").value;
var new_aname=document.getElementById("new_aname").value;
var table=document.getElementById("data_table1");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='acode_row"+table_len+"'>"+new_acode+"</td><td id='aname_row"+table_len+"'>"+new_aname+"</td><td><input type='button' id='aedit_button"+table_len+"' value='Edit' class='edit' onclick='aedit_row("+table_len+")'> <input type='button' id='asave_button"+table_len+"' value='Save' class='save' onclick='asave_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='adelete_row("+table_len+")'></td></tr>";
document.getElementById("new_acode").value="";
document.getElementById("new_aname").value="";
}
HTML code
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>acad_code</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="css/pages.css">
<script type="text/javascript" src="js/acad_code.js"></script>
</head>
<body>
<br>
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px"; border="1" cellspacing= "2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try setting a specific width for the button td.
function aedit_row(no) {
document.getElementById("aedit_button" + no).style.display = "none";
document.getElementById("asave_button" + no).style.display = "table-cell";
var acode = document.getElementById("acode_row" + no);
var aname = document.getElementById("aname_row" + no);
var acode_data = acode.innerHTML;
var aname_data = aname.innerHTML;
acode.innerHTML = "<input type='text' id='acode_text" + no + "' value='" + acode_data + "'>";
aname.innerHTML = "<input type='text' id='aname_text" + no + "' value='" + aname_data + "'>";
}
function asave_row(no) {
var acode_val = document.getElementById("acode_text" + no).value;
var aname_val = document.getElementById("aname_text" + no).value;
document.getElementById("acode_row" + no).innerHTML = acode_val;
document.getElementById("aname_row" + no).innerHTML = aname_val;
document.getElementById("aedit_button" + no).style.display = "table-cell";
document.getElementById("asave_button" + no).style.display = "none";
}
function adelete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function aadd_row() {
var new_acode = document.getElementById("new_acode").value;
var new_aname = document.getElementById("new_aname").value;
var table = document.getElementById("data_table1");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='acode_row" + table_len + "'>" + new_acode + "</td><td id='aname_row" + table_len + "'>" + new_aname + "</td><td><input type='button' id='aedit_button" + table_len + "' value='Edit' class='edit' onclick='aedit_row(" + table_len + ")'> <input type='button' id='asave_button" + table_len + "' value='Save' class='save' onclick='asave_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='adelete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_acode").value = "";
document.getElementById("new_aname").value = "";
}
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px" ; border="1" cellspacing="2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td style="width: 200px;"><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>

Add/Edit/Delete rows with select option - Javascript

I am using JavaScript to add/delete/edit rows. The row includes 4 textbox and one selection box. When I click on edit I am able to change the value of textbox but for selection box as the option dont appear I am not able to do it and also even on clicking Save the value of checkbox is not stored correctly(it stores the value not the description). Can you please help me finding the error in script ?
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var ffcode = document.getElementById("ffcode_row" + no);
var ffname = document.getElementById("ffname_row" + no);
var fftype = document.getElementById("fftype_row" + no);
var ffdate = document.getElementById("ffdate_row" + no);
var ffcode_data = ffcode.innerHTML;
var ffname_data = ffname.innerHTML;
var fftype_data = fftype.innerHTML;
var ffdate_data = ffdate.innerHTML;
ffcode.innerHTML = "<input type='text' id='ffcode_text" + no + "' value='" + ffcode_data + "'>";
ffname.innerHTML = "<input type='text' id='ffname_text" + no + "' value='" + ffname_data + "'>";
fftype.innerHTML = "<input type='select' id='fftype_text" + no + "' value='" + fftype_data + "'>";
ffdate.innerHTML = "<input type='date' id='ffdate_text" + no + "' value='" + ffdate_data + "'>";
}
function save_row(no) {
var ffcode_val = document.getElementById("ffcode_text" + no).value;
var ffname_val = document.getElementById("ffname_text" + no).value;
var fftype_val = document.getElementById("fftype_text" + no).value;
var ffdate_val = document.getElementById("ffdate_text" + no).value;
document.getElementById("ffcode_row" + no).innerHTML = ffcode_val;
document.getElementById("ffname_row" + no).innerHTML = ffname_val;
document.getElementById("fftype_row" + no).innerHTML = fftype_val;
document.getElementById("ffdate_row" + no).innerHTML = ffdate_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_ffcode = document.getElementById("new_ffcode").value;
var new_ffname = document.getElementById("new_ffname").value;
var new_fftype = document.getElementById("new_fftype").value;
var new_ffdate = document.getElementById("new_ffdate").value;
var table = document.getElementById("data_table");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='ffcode_row" + table_len + "'>" + new_ffcode + "</td><td id='ffname_row" + table_len + "'>" + new_ffname + "</td><td id='fftype_row" + table_len + "'>" + new_fftype + "</td><td id='ffdate_row" + table_len + "'>" + new_ffdate + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_ffcode").value = "";
document.getElementById("new_ffname").value = "";
document.getElementById("new_fftype").value = "";
document.getElementById("new_ffdate").value = "";
}
<h2>Fee Code Maintenance</h2>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Fee Type</th>
<th>Due Date</th>
</tr>
<tr id="row1">
<td id="ffcode_row1">AF</td>
<td id="ffname_row1">Annual Fees</td>
<td id="fftype_row1">Fixed Fee</td>
<td id="ffdate_row1">2016-12-21</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="ffcode_row2">MF</td>
<td id="ffname_row2">Medical Fees</td>
<td id="fftype_row2">Fixed Fee</td>
<td id="ffdate_row2">2016-12-11</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="ffcode_row3">TF</td>
<td id="ffname_row3">Tution Fees</td>
<td id="fftype_row3">Fixed Fee</td>
<td id="ffdate_row3">2016-11-11</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_ffcode"></td>
<td><input type="text" id="new_ffname"></td>
<td>
<select name="fftype" id="new_fftype">
<option value="">-select-</option>
<option value="FF">Fixed Fee</option>
<option value="RF">Refundable Fee</option>
<option value="PF">Penalty Fee</option>
<option value="DF">Discounts</option>
</select>
</td>
<td><input type="date" id="new_ffdate"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
your function edit_row() does not append the appropriate select dropdown to your table-cell. Try to change these Lines in edit_row:
fftype.innerHTML="<select id='fftype_text"+no+"' value='"+fftype_data+"'>
<option value>-select-</option>
<option value='FF'>Fixed Fee</option>
<option value='RF'>Refundable Fee</option>
<option value='PF'>Penalty Fee</option>
<option value='DF'>Discounts</option>
</select>";
and for the save_row():
var e =document.getElementById("fftype_text"+no);
var fftype_val=e.options[e.selectedIndex].text;
Here is a Code Snipet

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