We Keep Coding

Javascript Append Function, Need to build a loop

I have a .php file where I am using both HTML and JavaScript to display items from my database. I have a JavaScript append function that is creating cards where each item is display. On my cards, I have a button that will expand the card to show product history. Some products have more history than others so the expansion needs to be dynamic. The historical data is being pulled from database and is initially in a php array. I originally was going to institute php into the javascript append function but I could not figure out how to set the JavaScript index variable 'I' to my php index. So I want to just stay with JavaScript. But I don't know how to write a loop in the middle of this append function that will loop through the historical array and populate the expansion. Below is what I am attempting. I took out a lot of the lines in the append function but you can see what I am trying to do.
function get_products() {
clear_cards();
$.each(productNumbers,
function(i, value) {
$('.main_card_shell').append(
"<div class='card_content card_style' id='card" + i + "'>" +
"<div id='card_tab2" + i + "' class='tabcontent' data-tab='tab-name2'>" +
"<div class='details_tables'>" +
"<table>" +
"<tr>" +
"<th>Item Type</th>" +
"<th>Painted</th>" +
"<th>Last Sold" +
"<a id='_close_tab" + i + "' class='tablinks tab_override' onclick=\"openCity(event,'card_tab4" + i + "')\">" +
"<i class='large angle up icon'></i>" +
"</a>" +
"</th>" +
"</tr>" +
"<tr>" +
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength)
{
+ "<td>" + itemtypesplit[counter] + "</td>" +
+ "<td>" + itemdatesplit[counter] + "</td>" +
counter = counter + 1;
}
+
"</tr>" +
"</table>" +
"</div>" +
"</div>" +
Please help. I had it working with PHP inserted in, but I just couldn't figure out how to set it to a PHP variable.

Place this code into a function:
function getSomething(i) {
var html = '';
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength) {
html += "<td>" + itemtypesplit[counter] + "</td>";
html += "<td>" + itemdatesplit[counter] + "</td>";
counter = counter + 1;
}
return html;
}
And then use it in your HTML building block:
'<some html>' + getSomething(i) + '<some other html>'

Best Way to make one section of a LI editable

What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";

Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.

How to get the label value in javascript

I am creating a dynamic tr/td based on json data using below code.
for (i = 0; i < dataPoolJSON.length; i++) {
html += "<tr id ='row" + i + "' value ='" + dataPoolJSON[i].msisdn + "'><td><div class='group'><label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>" + dataPoolJSON[i].msisdn;
html += "</label></div></td><td class='hidden-xs'><a id='viewUsage" + i + "' class='viewUsage' onclick='viewDataPoolUsage(this," + dataPoolJSON[i].msisdn + ");return false;' href=''>View Usage</a>";
html += "<div class='pool-usage hidden'></div></td>";
html += "<td><span id='dataAllowed" + i + "'><select>";
if (dataPoolJSON[i].userSetting != null) {
html += "<option selected='selected' value='" + dataPoolJSON[i].userSetting.alertPercentageData1 + "'>" + dataPoolJSON[i].userSetting.alertPercentageData1 + "</option>";
}
html += "</select></span></td></tr>";
}
$('#data-pool tbody').html(html);
Now on click on radio button i need to fetch the msisdn value and current option selected value as but it is not giving me required answer. I am getting the current option selected value but not the msisdn.
function submitNewDataUsagealerts() {
var jsonSubmitData = [];
var selectedData = document.getElementsByName("msisdnSelected");
var i = selectedData.length-1;
for ( j=0; j <= i; j++ ) {
if(selectedData[j].checked) {
var valueCurrent = $('#dataAllowed'+selectedData[j].value).find('option:selected').val();
var row = $('#label'+selectedData[j].value).val();
item = {}
item [0] = valueCurrent;
item [1] = selectedData[j].value;
}
}
}

To get the "value" from a label, use .text() rather than .val().
var row = $('#label'+selectedData[j].value).text();
As your label includes an input and the required text, you can put the text inside a container so that it can be referenced without including the input:
The label code is currently (irrelevant code removed) :
html += "<label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>";
html += dataPoolJSON[i].msisdn;
html += "</label>";
change this to:
html += "<label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>" ;
html += "<span>" + dataPoolJSON[i].msisdn + "</span>";
html += "</label>";
Then your selector can be:
var row = $('#label'+selectedData[j].value + ">span").text();
Alternatively, move the input out of the label as you're already using label for=:
html += "<input id='numView" + dataPoolJSON[i].msisdn + "' type='radio' class='iradio_minimal' value='" + i + "' name='msisdnSelected'/>" ;
html += "<label id='label" + i + "' for='numView" + dataPoolJSON[i].msisdn + "' class='ch-control'>";
html += dataPoolJSON[i].msisdn
html += "</label>";
Then your selector can be:
var row = $('#label'+selectedData[j].value).text();

var msg = document.getElementById('lbltxt').innerHTML;
alert(msg);
<label id="lbltxt" style="display:none">Test</label>

HTML Code
<label id="mylabel" />
JS Code
var lavelValue = $("#mylabel").text();

Fetched data not being displayed on a new page (JavaScript/HTML)

I am attempting to get the data fetched from the query to be displayed on a different page, however the data is not being displayed on a new page.
The table was being displayed with the data correctly on the same page as the search, however when I tried to change things around so the data is shown on a new page it doesn't work.
I am using JQuery mobile, so it's a one page structure (all pages under index.html) and I have all my javascript on a separate file.
Can anyone see the issue here?
Fetching data function:
function fetchEvent()
{
db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
db.transaction(foundEvent, errorCB);
}
function foundEvent(tx)
{
var TitleT = document.getElementById("texttitle").value;
tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], renderEvent);
}
function renderEvent(tx, response) {
/* var div = document.getElementById("responsediv"); */
var temp = "<table border=\"1\"><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";
for (var i = 0; i < response.rows.length; i++) {
temp += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location + "</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date + "</td><td>" + response.rows.item(i).Description + "</td></tr>";
/* div.innerHTML = temp; */
}
var page6 = window.open("#page20", "mywin", '');
page6. dataFromParent = temp;
page6.render();
}
var dataFromParent;
function render() {
$('datadisplay').innerHTML(dataFromParent);
}
HTML (page 6):
<div data-role="page" id="page20" data-theme="d">
<div data-role="content">
<div id="datadisplay">
</div>
</div>
</div>

for (var i = 0; i < response.rows.length; i++) {
temp += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location + "</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date + "</td><td>" + response.rows.item(i).Description + "</td></tr>";
/* div.innerHTML = temp; */
}
Ok , So u want a different page to show your data , When u move to another page response object which has your data is getting lost . I would suggest you to make a whole new page.
Something in this line.
var formElements = "<table id='resulttable' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
for (var i = 0; i < response.rows.length; i++) {
formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "<a href='map.html' rel='external' data-ajax='false' data-role='button' data-mini='true'>View on Map</a></td></tr>";
}
formElements+="</tbody></table>";
$('#page_body').append('<div data-role="page" data-theme="d" id="' + page_id + '"><div data-role="content">' + formElements + 'Return</div></div>');
$.mobile.initializePage();
$.mobile.changePage("#" + page_id);
page_id is specific id of the dynamic page , which u can set
Now you might need to make a few customization according to you.But the logic is you are making an entire div all from scratch and appending it . Now you need to write a function FORWARD() which would have your logic for navigation and BACK which would have your logic for BACK functionality .
Hope it helps.

javascript find delta of modified form data

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?