I have read all the previous threads concerning this topic, but still end up getting
Uncaught TypeError: Cannot read property 'length' of undefined
in both Chrome and Internet Explorer. I have created an empty file, named it "DataTable.js" and copy-pasted the code from here
Then I added the following line at the end of the code where my table is built:
$('#standard_report_table').DataTable();
My scripts:
var buildStandardReportTable = function()
{
var divContent = "";
var url = "/InputData/db_getSqlQueryResult";
$.ajax({
url: url,
type: "POST",
async: false,
data: { sqlStr: "SELECT id, name_rus, visual_level, children_number, parent_id, effect_on_parent_id, lft, rgt, children_are_visible, report_type_id, font_color " +
"FROM report_entries_template_standard " +
"WHERE visible = 1 AND report_type_id = " + $("#reportTypeCombobox").val() + ' ' +
"ORDER BY lft", connectionStr: "dbCon"},
success: function (data)
{
var divContent = '';
var obj = jQuery.parseJSON(data);
divContent = buildStandarReportContent(obj);
//$('#choosenav1')[0].style.display = "block";
//$('#choosenav2')[0].style.display = "block";
//$('#choosenav3')[0].style.display = "block";
$("#standard_report_table").html(divContent);
$('#standard_report_table').DataTable();
}
})
}
var buildStandarReportContent = function (obj)
{
var divContent = '<thead border="0"><tr>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 1000px;">Статья</th>';
divContent += '<th>ID</th>';
divContent += '</tr></thead>';
// Table content
divContent += '<tbody id="table_data">';
for (i = 0; i < obj.length; i++)
{
//'<tr class="' + (obj[i].Уровень == 1 ? "success" : "")
//+ (obj[i].Уровень == 2 ? "warning" : "") + '"><td style="vertical-align: middle"><div style="margin-left:' + (obj[i].Уровень - 1) * 20 + 'px">' + obj[i].Статья_название + '</div></td>';
divContent += '<tr style="height: 10px; background-color:' + obj[i].font_color + '" ' +
'onmouseover = "setElementsVisibility(' + i + ', 1)" ' +
'onmouseout = "setElementsVisibility(' + i + ', 0)">';
divContent += '<td><div id = "add_child_sign' + i + '" style = "display : none";"><img src= "/Content/pics/plus_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "openAddNewChildWindow(' + obj[i].id + ')"</div></td>';
divContent += '<td><div id = "delete_sign' + i + '" style = "display : none";"><img src= "/Content/pics/delete_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "deleteChild(' + obj[i].id + ')"</div></td>';
divContent += '<td><div class = "glyphicon glyphicon-triangle-top" varia-hidden="true" id = "arrowup' + i + '" style = "' +
'height:10px;width:10px;cursor:pointer; color:red" ' +
'onclick = "swapChild(' + obj[i].id + ', \'up\')"></div>';
divContent += '<td><div class = "glyphicon glyphicon-triangle-bottom" id = "arrowdown' + i + '" style = " ' +
'height:10px; width:10px; cursor:pointer" ' +
'onclick = "swapChild(' + obj[i].id + ', \'down\')"></div></td>';
divContent += '<td><div id = "arrowleft' + i + '" style = "display : none";"><img src= "/Content/pics/arrowleft_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "editVisualLevel(' + obj[i].id + ', \'left\')"</div></td>';
divContent += '<td><div id = "arrowright' + i + '" style = "display : none";"><img src= "/Content/pics/arrowright_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "editVisualLevel(' + obj[i].id + ', \'right\')"</div></td>';
divContent += '<td><div id = "edit_sign' + i + '" style="display: none;"><div style = "vertical-align:bottom"><img src= "/Content/pics/edit_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "openEditChildWindow(' +
obj[i].id + ',\'' + obj[i].name_rus + '\',\'' + obj[i].name + '\',' + obj[i].effect_on_parent_id + ',' +
obj[i].parent_id + ',' + obj[i].report_type_id + ')"</div></td>';
divContent += '<td><div class = "cell_level_' + obj[i].visual_level + '" style = "margin-left : ' + 30 * (obj[i].visual_level - 1) + 'px; ' +
'cursor:' + (obj[i].children_number == 0 ? "default" : "pointer") + '" ' +
'onclick="collapseTreeNode(' + obj[i].lft + ',' + obj[i].rgt + ',' + obj[i].children_are_visible + ','+ obj[i].children_number + ')">';
divContent += obj[i].name_rus + '<span style="color:#A0A0A0; font-weight: normal;"> (' + obj[i].children_number + ')</span></div></td><td>' + obj[i].id + '</td><tr>';
}
divContent += '</tbody>'
divContent += '</table>';
return divContent;
}
HTML:
<div class="container">
<table id="standard_report_table" class="table table-striped"></table>
</div>
Use in this way.
var obj = jQuery.parseJSON(data);
$('#standard_report_table').DataTable({
"ajax": obj
});
define html
<table id="standard_report_table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
Related
As all the 3 product functions has the same product list how can i combine these multiple functions into one so that i can avoid repeating myself here.
How to combine these three functions into one as all the functions has the product list only the currency are different? Could someone please suggest me. Thanks
function ProductDataRenderer() { }
ProductDataRenderer.prototype.render = function () {
var nzd =
'<table class="table table-striped">'
+' <thead>'
+' <tr><td colspan="3">Products (NZD)</td></tr>'
+' <tr>'
+' <td>Name</td>'
+' <td>Price</td>'
+' <td>Type</td>'
+' </tr>'
+' </thead>'
+ ' <tbody>';
var n = ProductDataConsolidator.get();
for (var i = 0; i < n.length; i++) {
nzd +=
'<tr>'
+ '<td>' + n[i].name +'</td>'
+ '<td>' + n[i].price + '</td>'
+ '<td>' + n[i].type + '</td>'
+ '</tr>';
}
nzd += '</tbody></table>';
document.getElementById("nzdProducts").innerHTML = nzd;
var usd =
'<table class="table table-striped">'
+ ' <thead>'
+ ' <tr><td colspan="3">Products (USD)</td></tr>'
+ ' <tr>'
+ ' <td>Name</td>'
+ ' <td>Price</td>'
+ ' <td>Type</td>'
+ ' </tr>'
+ ' </thead>'
+ ' <tbody>';
var u = ProductDataConsolidator.getInUSDollars();
for (var i = 0; i < u.length; i++) {
usd +=
'<tr>'
+ '<td>' + u[i].name + '</td>'
+ '<td>' + u[i].price + '</td>'
+ '<td>' + u[i].type + '</td>'
+ '</tr>';
}
usd += '</tbody></table>';
document.getElementById("usdProducts").innerHTML = usd;
var euro =
'<table class="table table-striped">'
+ ' <thead>'
+ ' <tr><td colspan="3">Products (Euro)</td></tr>'
+ ' <tr>'
+ ' <td>Name</td>'
+ ' <td>Price</td>'
+ ' <td>Type</td>'
+ ' </tr>'
+ ' </thead>'
+ ' <tbody>';
var e = ProductDataConsolidator.getInEuros();
for (var i = 0; i < e.length; i++) {
euro +=
'<tr>'
+ '<td>' + e[i].name + '</td>'
+ '<td>' + e[i].price + '</td>'
+ '<td>' + e[i].type + '</td>'
+ '</tr>';
}
euro += '</tbody></table>';
document.getElementById("euProducts").innerHTML = euro;
}
Hey this one should do the trick
const renderTable = ({ items, title, containerId }) => {
let tableTemplate =
'<table class="table table-striped">' +
' <thead>' +
` <tr><td colspan="3">${title}</td></tr>` +
' <tr>' +
' <td>Name</td>' +
' <td>Price</td>' +
' <td>Type</td>' +
' </tr>' +
' </thead>' +
' <tbody>'
for (let i = 0; i < items.length; i++) {
tableTemplate +=
'<tr>' +
`<td>${items[i].name}</td>` +
`<td>${items[i].price}</td>` +
`<td>${items[i].type}</td>` +
`</tr>`
}
tableTemplate += '</tbody></table>'
document.getElementById(containerId).innerHTML = tableTemplate
}
renderTable({
items: ProductDataConsolidator.get(),
title: 'Products (NZD)',
containerId: 'nzdProducts'
})
renderTable({
items: ProductDataConsolidator.getInUSDollars(),
title: 'Products (USD)',
containerId: 'usdProducts'
})
renderTable({
items: ProductDataConsolidator.getInEuros(),
title: 'Products (Euro)',
containerId: 'euProducts'
})
This is a simplified Bootstrap table created in JavaScript for a shopping cart. I have one row with four columns. The problem is when I open it in Chrome all the data for columns 2, 3 and 4 are all placed in column 1.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="productsList">
</div>
<script>
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
productsList.innerHTML += '<tr>' +
'<td><div><img style="width:200px; height:300px;" src="nopicture.jpg" /></div></td>' +
'<td>' +
'<h6 id="productname"> Nice Product</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs. 5000/=</div></td>' +
'<td><div id="productquantity">3</div></td>' +
'</tr>';
productsList.innerHTML += '</tbody>' +
'</table>';
</script>
</body>
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for(var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
productsList.innerHTML += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
productsList.innerHTML += '</tbody>' +
'</table>';
}
You can't append to the innerHTML of an element like that. When you do it the first time, Chrome tries to close out your table for you and make it valid HTML. The second+ time you are appending HTML after your table is closed with </table>. Put the HTML into a local variable instead and then assign innerHTML once at the end.
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
var content = '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for (var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
content += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
content += '</tbody>' + '</table>';
productsList.innerHTML = content;
}
I'm trying to toggle between the innerHTML of a table data cell from an AJAX output from onclick row event:
JS:
...
var thisrownumber = 0;
var detailednote = '';
var simplifiednote = '';
htmlStr += '<table>';
$.each(data, function(k, v){
thisrownumber ++;
detailednote = v.note_ids;
simplifiednote = '<img class="See" src="~.png" alt="See" style="width:20px; height:20px;"> See';
htmlStr += '<tr onclick="shrow(' + thisrownumber + ',' + detailednote + ',' + simplifiednote + ')">'
+ '<td>' + v.date + '</td>'
+ '<td>' + v.r + '</td>'
+ '<td>' + v.f + ': ' + v.s + '</td>'
+ '<td>' + '<span id="span_note' + thisrownumber + '">' + simplifiednote + '</span>'
+ '</td>'
+ '</tr>';
});
htmlStr += '</table>';
$("#content").html(htmlStr);
} // function close
function shrow(x,y,z){
var lang3 = "span_note";
var shrow = x;
var span_note = lang3.concat(x);
if(document.getElementById(span_note).innerHTML == y){
document.getElementById(span_note).innerHTML = z;
}
if(document.getElementById(span_note).innerHTML == z){
document.getElementById(span_note).innerHTML = y;
}
}
HTML:
<div id="content"></div>
Getting error:
Uncaught SyntaxError: missing ) after argument list
Here I am creating dynamic table
function addToMLContainer(id, mlName, mlAddress) {
return '<td><s:text>' + mlName + ' ' + mlAddress + '</s:text></td>' +
'<td hidden="hidden">' + id + '<input name="mlId" type="hidden" value = "' + id + '" /></td>' +
'<td hidden="hidden"><input name="mlFullName" type="hidden" value = "' + mlName + ' ' + mlAddress + '" /></td>' +
'<td align="center"><img src="/delete.png" class="remove" onclick="this.closest(\'tr\').remove()"/></td>'
}
And here I am getting value of tr:
var t = document.getElementById("AddedMlsContainer");
for (var i = 1, row; row = t.rows[i]; i++) {
selectedMerchants = selectedMerchants + " " + row.cells[2].children[0].value + "\n";
}
The problem is I can't get value with double or single quotes like <I'm "blabla">
Finally I did it by removing input field and unnesessary td:
'<td>' + mlName + ' ' + mlAddress + '</td>' +
'<td hidden="hidden">' + id + '<input name="mlId" type="hidden" value = "' + id + '" /></td>' +
'<td align="center"><img src="/delete.png" class="remove" onclick="this.closest(\'tr\').remove()"/></td>'
Then I used innerHtml
var t = document.getElementById("AddedMlsContainer");
for (var i = 1, row; row = t.rows[i]; i++) {
selectedMerchants = selectedMerchants + " " + row.cells[0].innerHTML.replace(/ /g,'') + "\n";
}
I have an html and javascript page rendered through python django, where I have a form data of 30 entries maximum in each page, that can be edited. I included a hidden field with the same form data to extract the old, and modified values in the form. I am looking for extracting just the delta (old and new values for the field that was changed). My code is
{%extends 'base.html'%}
{%block content%}
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function onEdit(btn)
{
var id=btn.id;
var before = '';
var after = '';
var input = document.getElementsByName("new"+id);
if(btn.value=="Edit") {
//var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //search is the key defined in django view and will be substituted with the json value
{% endautoescape %}
text = ''
var out = '<form name="display" id="update" method="post" action="update/">';
out += "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "<th>MX priority</th>";
out += "<th>Recorded generated on</th>";
out += "<th></th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to + "'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
data.records[i].priority_mx +
"</td><td>" +
data.records[i].generated_on +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
out += "<input type='hidden' name='currenturl' value='" + link + "'>"
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
//out += '<input style="position: relative; left: 550px;" type="submit" value="Submit">';
out += '<br>'
out += '<button type="submit" class="btn btn-default">Submit</button>'
out += '</form>';
document.getElementById("data").innerHTML = out
</script>
{%endblock%}
What is the best way to do this?