I have this code below that moves the value from Random Fruits to Green Fruits but the problem is i'm trying to make it so that after i move the value into Green Fruits i will be also able to move it back to the Random Fruits Table but i keep getting this error message "message": "Uncaught TypeError: Cannot read property 'indexOf' of undefined", am i doing something wrong with the code below? Any help would be greatly appreciated thanks!
var obj = {};
var obj2 = {};
var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);
var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);
var key3 = "Random Fruits";
obj2[key3] = ['Kiwi', 'Pomegranate', 'Honeydew', 'Plum'];
var myArray3 = [];
myArray3.push(obj2);
function redraw(obj) {
var $header = $("<tr>"),
cols = 0,
bodyString = "";
$.each(obj, function(key, values) {
cols = Math.max(cols, values.length);
$header.append($('<th class="total_count_' + key.replace(/\s/g, '_') + '"/>').text(key + ": " + values.length));
});
for (var i = 0; i < cols; i++) {
bodyString += '<tr>';
$.each(obj, function(key, values) {
bodyString += '<td>' +
(values[i] ? values[i] : "") +
'</td>';
});
bodyString += '</tr>';
}
$('.fruitsclass thead').html($header);
$('.fruitsclass tbody').html(bodyString);
var bodyString = '';
var headString = '';
$.each(obj2[key3], function(index) {
bodyString += ('<tr><td>' + obj2[key3][index] + '</td></tr>');
});
headString += ('<tr><th>' + 'Random Fruits' + '</th></tr>');
$('.fruityclass tbody').html(bodyString);
$('.fruityclass thead').html(headString);
}
function addNewRow(fruitName) {
var tds = '<tr><td class="new-row">' + +'</td></tr>';
}
function listener(obj) {
$(document).ready(function() {
$("#fruityid td").click(function() {
data = this.innerHTML;
k1 = Object.keys(obj2).find(k => obj2[k].indexOf(data) >= 0)
index = obj2[k1].indexOf(data);
obj2[k1].splice(index, 1);
obj[key2].push(data);
$(".total_count_Green_Fruits").html(key2 + ': ' + obj[key2].length);
var element = $(this).detach();
$('#fruitsid > tbody').append('<tr><td></td><td class="new-green-fruit">' + element.html() + '</td></tr>');
});
});
$(document).ready(function() {
$('body').on('click', '.new-green-fruit', function() {
console.log("Fruit : " + (this.innerHTML));
data2 = this.innerHTML;
k2 = Object.keys(obj).find(j => obj[j].indexOf(data2) >= 0)
index2 = obj[k2].indexOf(data2);
obj[k2].splice(index2, 1);
obj2[key3].push(data2);
});
});
}
redraw(obj);
listener(obj);
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center
}
.skillsTable th {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
}
table {
float: left;
border-collapse: collapse;
width: 70%
}
td {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
padding-top: 8px;
padding-left: 11px;
font-size: 15px;
}
th {
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #AAA5A4;
padding-bottom: 5px;
}
div {
margin-bottom: 50px;
}
.new-green-fruit {
color: lime;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<div id="result"> </div>
<div class="center">
<table id="fruitsid" class="fruitsclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div class="center">
<table id="fruityid" class="fruityclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
actually all you have to do is update the view. You have done the item shifting correctly.
You see no error first time you do the shift back, because the item is there. You only see the error second time you click the item in the list again. It is because view did not update and the item is gone already!
Related
I cant figure out why a double <BR> is automatically being added to my newly appended table rows.
All you have to do is hit the enter key to cause the problem.
I don't want any <br> to be added, it screws up my data entry process.
The problem appears to be happening in the appenNewRow() function.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Text Area Order Input</title>
<style>
.myInputClass {
width: 120px;
}
.myOutputClass {
width: 240px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
storeflag = true;
attribstart = "";
attribend = "";
output_result = "";
var row = 0;
var storeIndex = 0;
var productIndex = 0;
var thisstore_id=0;
function appendNewRow(inputType)
{
row++;
var markup = "<tr id='"+row+"'><td input-row='"+row+"' input-type='"+inputType+"' class='myInputClass' height='auto' contenteditable='true' placeholder='Next'></td><td output-row='"+row+"' class='myOutputClass'></td><td extra-row='"+row+"' class='extra'></td></tr>";
$("table tbody").append(markup);
myjunk = document.querySelector('[input-row="' + row + '"]').innerHTML;
document.querySelector('[input-row="' + row + '"]').innerHTML = "zzz";
document.getElementById(row).getElementsByClassName('myInputClass')[0].focus();
}
function getStore(thisstore)
{
}
function getProduct(thisstore_id, thisproduct_nickname)
{
}
$(document).ready(function(){
document.getElementById('1').getElementsByClassName('myInputClass')[0].focus();
lastKey = 13;
$("tbody").on('keypress', ".myInputClass", (function(event){
if (event.which == 13) { // Enter Key.
attribstart = "";
attribend = "";
row = Number($(this).attr('input-row'));
thishtml = $(this).html();
if ($(this).text().length > 0) {
x = $(this).text();
if (storeflag == true) {
thisstore_id = getStore(x);
} else {
getProduct(thisstore_id,x);
}
} else {
$(this).text("---");
appendNewRow('store');
storeflag = true;
//$('#YourContainer').find('br').remove();
$('[input-row="' + row + '"]').find('br').remove(); // Fixes an ajax bug.
}
} else {
} //end if
lastKey = event.which;
}));
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
<th>Extra</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td input-row='1' input-type='store' class='myInputClass' height='auto' contenteditable='true' placeholder='Just Start Typing a storename'></td>
<td output-row='1' class='myOutputClass'></td>
<td extra-row='1' class='extra'></td>
</tr>
</tbody>
</table>
</body>
</html>
I cleaned up the code you presented. It's a better practice to use all jQuery or all JavaScript. Based on the following testing, you may need to add the content and then make it Editable.
$(function() {
$("#empty").click(function() {
$("<tr>").appendTo($("table tbody"));
$("<td>").appendTo($("table tr:last")).prop("contenteditable", true);
});
$("#full").click(function() {
$("<tr>").appendTo($("table tbody"));
$("<td>").appendTo($("table tr:last")).html("Edit").prop("contenteditable", true);
});
});
table {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
margin: 0;
}
table tr {
height: 1.5em;
}
table tr td {
border: 1px dashed black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Non-Edit</td>
</tr>
</tbody>
</table>
<button id="empty">Add Empty Row</button>
<button id="full">Add Full Row</button>
We apply this to your code.
$(function() {
var storeflag = true,
attribstart = "",
attribend = "",
output_result = "",
row = 0,
storeIndex = 0,
productIndex = 0,
thisstore_id = 0;
function appendNewRow(inputType) {
var markRow = $("<tr>", {
id: ++row
}).appendTo($("table tbody"));
$("<td>", {
class: "myInputClass",
height: "auto",
placeholder: "Next",
"input-row": row,
"input-type": inputType
}).appendTo(markRow);
$("<td>", {
class: "myOutputClass",
"output-row": row
}).appendTo(markRow);
$("<td>", {
class: "extra",
"extra-row": row
}).appendTo(markRow);
$("td:eq(0)", markRow).html("Start").prop("contenteditable", true).focus();
}
function getStore(thisstore) {
$.ajax({
url: 'ajax_getstore',
data: "store=" + thisstore,
method: "GET",
dataType: "json",
cache: false,
success: function(data) {
var markup = "";
if (data.length > 1) {
$.each(data, function(thisname, thisvalue) {
var output = attribstart + thisvalue.fields.name + attribend;
markup += "<tr id='" + row + "'><td class='dyninput'>row:" + row + " - " + output + "</td></tr>";
});
} else {
$('[input-row="' + row + '"]').html(thisstore); // Fixes an ajax bug.
$('[output-row="' + row + '"]').attr('input-type', 'store');
$('[output-row="' + row + '"]').html(attribstart + data[0].fields.name + attribend);
}
thisstore_id = data[0].pk;
appendNewRow('product');
output_result = "";
}, // End success.
error: function() {
alert('error');
},
}); //End Ajax.
attribstart = "<b>";
attribend = "</b>";
storeflag = false; //reset storeflag.
}
function getProduct(thisstore_id, thisproduct_nickname) {
var qty = parseInt(thisproduct_nickname);
if (isNaN(qty)) {
qty = '1';
} else {
thisproduct_nickname = thisproduct_nickname.replace(qty, '');
}
$.ajax({
url: 'ajax_getproduct',
data: 'store_id=' + thisstore_id + '&qty=' + qty + '&product_nickname=' + thisproduct_nickname,
method: "GET",
dataType: "json",
cache: false,
success: function(data) {
var markup = "";
if (data.length > 1) {
$.each(data, function(thisname, thisvalue) {
var output = attribstart + thisvalue.fields.product_name + attribend;
markup = markup + "<tr id='" + row + "'><td class='dyninput'>row:" + row + " - " + output + "<br></td></tr>";
row++;
});
} else {
$('[input-row="' + row + '"]').html(thisproduct_nickname); // Fixes an ajax bug.
$('[output-row="' + row + '"]').attr('input-type', 'product');
$('[output-row="' + row + '"]').html(attribstart + qty + ' ' + data[0].fields.product_default_uom_code + ' ' + data[0].fields.product_name + attribend);
}
appendNewRow('product');
output_result = "";
}, // End success.
error: function() {
alert('error');
},
}); //End Ajax.
}
function display_result(data_output_result) {
var badjson = JSON.parse(data_output_result);
var myjson = badjson.replace("\\", "");
var goodjson = JSON.parse(myjson);
var markup = "";
$.each(goodjson, function(thisname, thisvalue) {
row = row + 1;
var output = attribstart + thisvalue.fields.name + attribend;
markup += "<tr id='" + row + "'><td class='dyninput'>row:" + row + " - " + output + "<br></td></tr>";
console.log(thisvalue.fields.id, thisvalue.fields.name);
});
$("table tbody#myOutputBodyId").append(markup);
output_result = "";
}
$('#1 .myInputClass').focus();
var lastKey = 13;
$("tbody").on('keypress', ".myInputClass", function(event) {
event.preventDefault();
if (event.which == 13) { // Enter Key.
attribstart = "";
attribend = "";
row = Number($(this).attr('input-row'));
thishtml = $(this).html();
if ($(this).text().length > 0) {
x = $(this).text();
if (storeflag == true) {
thisstore_id = getStore(x);
} else {
getProduct(thisstore_id, x);
}
} else {
$(this).text("---");
appendNewRow('store');
storeflag = true;
//$('#YourContainer').find('br').remove();
$('[input-row="' + row + '"]').find('br').remove(); // Fixes an ajax bug.
}
} //end if
lastKey = event.which;
});
});
.myInputClass {
width: 120px;
}
.myOutputClass {
width: 240px;
}
table,
td {
margin: 0px;
border-collapse: collapse;
padding: 0px;
border-spacing: 0px;
vertical-align: top;
}
table th {
border: 1px solid #6C220B;
border-spacing: 0px;
padding: 0px;
text-align: left;
}
table#myOutputTableId {
border: 0px;
padding: 0px;
margin: 0px;
align: top;
}
[xcontentEditable=true]:empty:before {
content: attr(placeholder);
opacity: 0.6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
<th>Extra</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td input-row='1' input-type='store' class='myInputClass' height='auto' contenteditable='true' placeholder='Just Start Typing a storename'></td>
<td output-row='1' class='myOutputClass'></td>
<td extra-row='1' class='extra'></td>
</tr>
</tbody>
</table>
The issue was the key capture from the Enter. This was injecting the new line in the editable and creating the <br>. We can use .preventDefault() to address this.
I am unable to test this code as it does not connect to any of the AJAX Urls.
I would like to addclass in 2nd row, by referring to array and its index.
I prepared array and all that remains to add class by referring to index.
through my work, it didn't work well.
How can I achieve them?
Thanks
let html = ''
html += '<table>';
let i = 0;
html += '<tr>';
for (let d = 0; d < 15; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
for (let w = 0; w < 1; w++) {
html += '<tr>';
for (let d = 0; d < 15; d++) {
html += '<td class=color></td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
const arr = [1, 2, 10, 11, 14].map(String);
$("td .color")
.filter(function() { return $(this).index(arr); })
.addClass('red');
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.color{
padding:5px;
}
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>
You should not have any space between the tag name and the class if both refer the same element. You can use includes() to check if the index + 1 is exists in the array or not.
Try the following way:
let html = ''
html += '<table>';
let i = 0;
html += '<tr>';
for (let d = 0; d < 15; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
for (let w = 0; w < 1; w++) {
html += '<tr>';
for (let d = 0; d < 15; d++) {
html += '<td class=color></td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
const arr = [1, 2, 10, 11, 14];
$("td.color")
.filter(function() { return arr.includes($(this).index()+1); })
.addClass('red');
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.color{
padding:5px;
}
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>
You could tidy up your loops a bit by first building the indexes, and then use backquote to clean up your html template.
Note: you should be using double quotes for attributes eg class="color"
const columnCount = 15;
const columnIndexes = [...Array(columnCount).keys()]; // make array of indexes
const rowsCount = 1;
const rowIndexes = [...Array(rowsCount).keys()];
const html =
`<table>
<tr>
${columnIndexes.map(c =>
`<td data-layer="0"><div>${c + 1}</div></td>
`)}
</tr>
${rowIndexes.map(r =>
`<tr>
${columnIndexes.map(c =>
`<td class="${r % 2 === 0 ? 'red' : ''}"></td>`
)}
</tr>`
)}
</table>
`
I need to print my HTML content in all the browsers with the header/footer repeating on every page. I have been successful in doing so perfectly in Chrome. Though in IE and Firefox also it is working but both these browsers do not work properly with css style - "page-break-inside: avoid" due to which it does not print content on first page but still on other pages it does print the header and footer.
Problem is with MAC safari. It just prints the header only once and does not print footer at all. My requirement is to print both header and footer repeatedly on each page.
Following is my sample print code. This code might prove helpful for somebody looking for printing in Chrome but can anyone please help me in printing the same in MAC safari as well.
Any help would be greatly appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
Print();
});
function Print() {
let data1 = [];
for (var i = 0; i < 140; i++) {
data1.push({ Title: "Item1." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })
}
let data2 = [];
for (var i = 0; i < 50; i++) {
data2.push({ Title: "Item2." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })
}
var printWindow = this.window; // window.open("", "", "location=1,status=1,scrollbars=1");
printWindow.document.write("<body>");
printWindow.document.write("<style type='text/css' media='print'>");
printWindow.document.write("#page {margin: 10mm; }");
printWindow.document.write(" thead {display: table-header-group;} ");
printWindow.document.write(" tfoot {display: table-footer-group;} ");
printWindow.document.write(" #footerforprinter {");
printWindow.document.write("position: fixed;");
printWindow.document.write("bottom: 0;");
printWindow.document.write("}");
printWindow.document.write(" #footerforprinter td{");
printWindow.document.write("width: 100%;");
printWindow.document.write("overflow: hidden;");
printWindow.document.write("word-wrap: break-word;");
printWindow.document.write("}");
printWindow.document.write(" tr {page-break-inside: avoid;}\n ");
printWindow.document.write("</style><style type='text/css' media='screen'> thead {display: table-header-group} tfoot {display: table-footer-group}</style>\n");
let style = '<style>\n ';
style += ' .t1{border: 1px solid black;border-collapse: collapse; font-size: 11px; margin-left:0px} \n';
style += ' .t1 th, .t1 td {border: 1px solid black;border-collapse: collapse;} \n';
style += ' .headerCol {text-align:left; background-color:lightgray; font-weight:bold; vertical-align: top;} \n ';
style += ' .firstCol {max-width:80px; vertical-align:top; min-width: 30px;padding:2px; padding-right:3px; text-align:right}\n ';
style += ' .dataCol1 {max-width:200px;vertical-align:top; min-width: 150px;padding:2px;}\n ';
style += ' .dataCol2 {max-width:150px;vertical-align:top; min-width: 80px; text-align:right;padding:2px;} \n ';
style += '</style>';
printWindow.document.write(style);
printWindow.document.write("<form id='form1' runat='server'><div><table style='width:100%; margin: 0 auto;'>");
printHeader(printWindow);
printWindow.document.write("<tbody><tr><td>");
printData(printWindow, data1);
printData(printWindow, data2);
printWindow.document.write("</td></tr>");
printWindow.document.write("</tbody>");
printFooter(printWindow);
printWindow.document.write("</div></form></body>");
//printWindow.print();
printWindow.focus();
// printWindow.document.close();
}
function printData(printWindow, data) {
printWindow.document.write('<table class="t1">');
printWindow.document.write('<tr style="text-align:center; background-color:lightgray; font-weight:bold;"><td colspan="5">Sample Data</td></tr>');
printWindow.document.write('<tr><td class="headerCol"></td>');
printWindow.document.write('<td class="headerCol">Title 1</td>');
printWindow.document.write('<td class="headerCol" style="text-align:right">Value 1</td>');
printWindow.document.write('<td class="headerCol" style="text-align:right">Value 2</td></tr>');
for (let x = 0; x < data.length; x++) {
printWindow.document.write('<tr><td class="firstCol">' + (x + 1).toString() + '</td>');
printWindow.document.write('<td class="dataCol1">' + data[x].Title + '</td>');
printWindow.document.write('<td class="dataCol2">' + data[x].Value1 + '</td>');
printWindow.document.write('<td class="dataCol2">' + data[x].Value2 + '</td></tr>');
}
printWindow.document.write('</table>');
printWindow.document.write('<br/>');
}
function printHeader(printWindow) {
let fileName = "-------";
printWindow.document.write("<thead><tr><td>");
printWindow.document.write("<div style='width:100%; border:1px solid black;text-align:center;'>");
printWindow.document.write("<table style='width:100%;'>");
printWindow.document.write("<tr><td colSpan='2' style='text-align:center; font-weight:bold;'>Report</td></tr>");
printWindow.document.write("<tr><td>Report Date: " + new Date() + "</td>");
printWindow.document.write("<td style='float:right;'>Version: 1.0.0.0</td></tr>");
printWindow.document.write("<tr><td>File Name: " + fileName + "</td></tr>");
printWindow.document.write("</table>");
printWindow.document.write("</div></td></tr><tr style='height:20px;'></tr></thead>");
}
function printFooter(printWindow) {
printWindow.document.write("<tfoot>");
printWindow.document.write('<tr style="height: 30mm;"><td></td></tr>');
printWindow.document.write("</tfoot>");
printWindow.document.write("<table style='width:100%; left: 0; right: 0; padding-left:7px; padding-right:7px;' id='footerforprinter'>");
printWindow.document.write("<tr>");
printWindow.document.write("<td>");
printWindow.document.write("<table style='width:100%; border:1px solid black;'>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 1</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 2</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 3</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("</table> ");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span style='font-size:10px !important;'>© Dummy Info.</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("</table> ");
}
</script>
</head>
</html>
I need help with running an if and else statement that will retrieve certain amounts of entries using XMLRequest and only return 10 entries instead of 30. I would like some assistance on how to make a function that will get the next set of entries so an example would be get 5 entries the first time and then 2nd click get 10 entries and so on.. I have been stuck and really would like to understand what I am not seeing clearly
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJAX High Score Example</title>
<style>
body { background-color: lightgreen; }
h1 { color: black;
text-align: center;}
button { display: block;
margin-left: auto;
margin-right: auto; }
#box1 { background-color: grey;
color: green;
border: 2px solid black;
width: 550px;
padding: 20px;
margin-left: auto;
margin-right: auto; }
th, td { color: black;
min-width: 120px;
text-align: center;
border: 1px solid black;}
table { margin: 20px auto 0px auto;
border: 5px solid black;
background-color: yellow;}
</style>
</head>
<body>
<h1>Cedrics Music List 1990 XML Part A</h1>
<div id="box1"></div>
<button type="button" onclick="getScores()">Display
Scores</button>
<script>
var request1;
var ratingValue = new Array();
var trackValue = new Array();
var singerValue = new Array();
var arraySelected = 0;
function getScores() {
request1 = new XMLHttpRequest();
request1.onreadystatechange = callback;
request1.open("GET", "topSongs1990.xml", true);
request1.send();
}
function callback() {
if ((request1.readyState == 4) && (request1.status ==
200)) {
var parser;
var xmlDoc;
var scoreDataXML = request1.responseText;
console.log(scoreDataXML);
parser = new DOMParser();
xmlDoc =
parser.parseFromString(scoreDataXML,"text/xml");
var outputs = xmlDoc.getElementsByTagName("entry");
console.log(outputs);
var output = "<table>";
output += "<tr><th>RATING</th><th>TRACK</th>
<th>SINGER</th></tr>";
if (arraySelected > 0; arraySelected < 10; ) {
ratingValue[i].getElementsByTagName("rating")
[0].childnodes[0].nodeValue + "</td><td>"
+ trackValue[i].getElementsByTagName("track")
[0].childnodes[0].nodeValue + "</td><td>"
+ singerValue[i].getElementsByTagName("singer")
[0].childnodes[0].nodeValue + "</td><td>";
document.getElementsByTagName("entry").innerHTML;
}else if (arraySelected > 10; arraySelected > 20; ){
} else {
for(i=0; i < outputs.length; i++) {
var ratingElement =
outputs[i].getElementsByTagName("rating");
var trackElement =
outputs[i].getElementsByTagName("track");
var singerElement =
outputs[i].getElementsByTagName("singer");
var s1 = ratingElement[0].firstChild.nodeValue;
var i1 = trackElement[0].firstChild.nodeValue;
var d1 = singerElement[0].firstChild.nodeValue;
/*ratingValue[i] = s1;
trackValue[i] = i1;
singerValue[i] = d1;*/
var row = "<tr>";
row += "<td>" + s1 + "</td>";
row += "<td>" + i1 + "</td>";
row += "<td>" + d1 + "</td>";
row += "</tr>";
output += row;
}
/*console.log("The rating Array is " + ratingValue);
console.log("The initials Array is " + trackValue);
console.log("The dates Array is " + singerValue); */
output += "</table>";
document.getElementById("box1").innerHTML = output;
}
}
</script>
</body>
</html>
I would like to have my function spit out 10 entries per click and if im able to complete that I would like to know how to decrement those values.
(im actually really new to javascript, so I apologize)
I keep getting errors because I cant properly form the right syntax
ajaxXML6Modified.html:31 Uncaught ReferenceError: getScores is not
defined
at HTMLButtonElement.onclick (ajaxXML6Modified.html:31)
onclick # ajaxXML6Modified.html:31
Constructive Criticism Welcomed
I got some div in a parent div. The parent div should only be as big as its child divs.
So this is the current view
function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init(){
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}
$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);
recordContainer.append($("<div>" + currentRecord.title + "</div>"));
recordContainer.append($("<div>" + currentRecord.description + "</div>"));
recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}
init(); // call the routine
.recordContainer{
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So I want recordContainer having a relative size. When looking for some information, I tried out adding display: inline; to "recordContainer". But then doing this, the container gets weird (?). You need to try it out, then you will see what I mean.
How can I achieve my desired div?
If you need them to be narrow but remain stacked vertically, use display: table, see the snippet below.
If you need them to be narrow and go onto the same line (and possibly wrap if that no longer fits), use display: inline-block.
function record(id, title, description, content, dateOfCreation) {
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init() {
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(i, "title " + i, "description " + i, "content " + i, "date " + i));
}
$(elements).each(function(index, currentRecord) {
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);
recordContainer.append($("<div>" + currentRecord.title + "</div>"));
recordContainer.append($("<div>" + currentRecord.description + "</div>"));
recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}
init(); // call the routine
.recordContainer {
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I made some changes to improve semantics and performance as well. The problem is that the element "DIV" is by default a block element and therefore occupy the entire horizontal space.
I hope this solution helps you.
function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init(){
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}
$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div class='recordContainer'><div class='container container-" + index + "'></div></div>");
$(document.body).append(recordContainer);
$(".container-" + index).append("<div>" +
"<p>" + currentRecord.title + "</p>" +
"<p>" + currentRecord.description + "</p>" +
"<p>" + currentRecord.dateOfCreation + "</p>" +
"<p>" + currentRecord.lastEdited + "</p></div>");
});
}
init(); // call the routine
.recordContainer{
display: inline-block;
margin: 0;
}
.container{
margin: 0 .5em;
padding: .5em;
border: 1px solid #cccccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 10px #ccc;
-moz-box-shadow: 1px 1px 10px #ccc;
box-shadow: 1px 1px 10px #ccc;
}
.container p {
text-align: center;
}
.container p:nth-child(odd){
background: #eee;
margin: 0;
padding: .3em .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>