Develop Reference

How to get image and name of image from the index array in javascript?

I set below codes for the the design. i try to get images and name of image form the index.`
function Link_Generate(event) {
event.preventDefault();
var links = '';
var link = 'www.ski-roller.de/';
var result = document.getElementById('wrapper');
var code_id = document.getElementById("code_id").value;
for (i = 1; i < 6; i++) {
links += ' <div class="input-groups">' +
' <input class="form-input" id="link_' + i + '" type="text" name="link_' + i + '" ' +
' value="' + link + i + '/=' + code_id + '" placeholder="Generated Link "/>' +
' <input class="form-button" type="submit" id="' + i + '" value="Copy" onclick="copyToClipboard(this.id)" "/>' +
' <label>Product Name:'+ i +' ' + '<img src="cr05.jpg" alt="cross prime" width="100" height="100"> '+ ' </label>' +
' </div>';
}
result.innerHTML = links;
}
`

Make dropdown item selected true dynamically

I am making dropdown item selected true dynamically using below lines of code
for(var i in data) {
var book_id = data[i]['book_id'];
var indivudvalbookdetails = data[i]['indivudvalbookdetails'];
var id=1;
for(var j in indivudvalbookdetails) {
if(indivudvalbookdetails[j]['status'] == undefined || indivudvalbookdetails[j]['status'] == "")
{
$('.library_info_tbl tbody').append('<tr>' +
'<td class="text-center centeralign"> ' + data[i]['subject'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['title'] + ' </td>' +
'<td class="text-center centeralign"> ' + data[i]['isbn'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['author'] + ' </td>' +
'<td class="text-center centeralign"> ' + indivudvalbookdetails[j]['acquisitionno'] + '</td>' +
'<td class="text-center centeralign"><div class="btn-group">' +
'<input type="text" class="hide" id="acquisitionno' + id + '" value="' + indivudvalbookdetails[j]['acquisitionno'] + '" class="form-control">' +
'<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>'+
'<option value="Damaged"' +
indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="true"': 'selected="false">Damaged</option>'+
'<option value="Lost"' +
indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="true"' : ' selected="false">Lost</option>' +
'</select>'+
//'<input type="text" id="status' + id + '" class="form-control">' +
'</div></td>' +
'</tr>');
id++;
}
}
It is displaying the code in html like:
"selected="false">Lost selected="false">Lost
selected="false">Lost selected="false">Lost selected="false">Lost"

The string termination is not right and the if condition as well.
Check the code below:
var id = 'select';
var indivudvalbookdetails = [{
status: 'Damaged'
}]
var j = 0;
var select = '<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>' +
'<option value="Damaged"' +
(indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="selected"' : '') + '>Damaged</option>' +
'<option value="Lost"' +
(indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="selected"' : '') + '>Lost</option>' +
'</select>'
document.getElementById('main').innerHTML = select;
<div id="main"></div>

To Add New row to dynamic table

In the below code i have dynamic table with dynamic colmnns.I can able to generate table now i want to add new row .As this dynamic table has dynamic id's for each textbox/dropdown/checkbox of the table.So when i click new row it also have dynamic id for each textbox/dropdown/checkbox.Pls help me to do this.
function LoadTableFields(sFieldID, Name, newdiv, FieldValue, TableValues) {
var TblValues = JSON.parse(TableValues);
var tHTML = '';
tHTML += '<table class="table table-bordered table-striped" id="table_' + sFieldID + '" name="' + Name + '"><thead><tr >';
var headers = [];
$.each(TblValues, function(i, item) {
if (headers.indexOf(item.Name) === -1) {
headers.push(item.Name);
tHTML += '<th class="text-center">' + item.Name + '</th>';
}
});
tHTML += '</tr></thead><tbody><tr id="row_0" data-id="0">';
var Count = 0;
$.each(TblValues, function(i, item) {
if (item.FieldType == 'TextBox') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + i + ' name=' + item.Name + i + ' placeholder=' + item.Name + ' class="form-control" value=' + item.FieldValue + ' /></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'DropDownList') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
var options = LoadTableFieldEnums(sFieldID, item.Name, item.FieldValue);
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><select id=' + item.Name + i + ' name=' + item.Name + i + ' class="form-control">' + options + '</select></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'CheckBox') {
tHTML += '<td data-name=' + item.Name + '><input type="checkbox" id=' + item.Name + i + ' name=' + item.Name + i + '/></td>';
} else if (item.FieldType == 'Date') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><div class="input-group date"><input type="text" class="form-control" id=' + item.Name + '0' + ' name=' + item.Name + '0' + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
Count = i;
} else {
tHTML += '<td data-name=' + item.Name + '></td>';
}
});
tHTML += '</tr></tbody></table>';
tHTML += '<a id="add_row_' + sFieldID + '" class="btn btn-default pull-left" onclick="AddNewTableRow(' + sFieldID + ');">Add Row</a><a id="delete_row_' + sFieldID + '" class="pull-right btn btn-default" onclick="DeleteTableRow(' + sFieldID + ');">Delete Row</a>';
newdiv.innerHTML += tHTML;
$('#divComplete').append(newdiv);
}
function AddNewTableRow(sFieldID) {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "row_" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#table_" + sFieldID + " tbody tr:nth(0) td"), function() {
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") != undefined) {
var td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
// Date control
if ($(children[0]).prop('tagName') == 'DIV') {
var strname = $(cur_td).data("name");
var c = $('<div class="input-group date"><input type="text" class="form-control" id=' + strname + '' + newid + ' name=' + strname + '' + newid + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div>');
c.appendTo($(td));
} else {
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.attr("id", $(cur_td).data("name") + newid);
c.appendTo($(td));
}
td.appendTo($(tr));
} else {
var td = $("<td></td>", {
'text': $('#table_' + sFieldID + ' tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#table_' + sFieldID));
}
function DeleteTableRow(sFieldID) {
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
if (newid != 0) {
$("#row_" + (newid)).remove();
}
}

jQuery not working without Alert()

Hi Everyone I have written a code to generate html Table from JSON file using jQuery. but the code is not working when I remove the alert() function. Please help me out with the issue. Thanking you all in advance
Bellow is my code
<script>
var a = {};
var b = {};
var i = 1;
var inc = 0;
var j = 9;
$.getJSON(
'JsonDataBlocks.json',
function(data) {
a = data;
$.each(a, function(idx, elem) {
alert(inc);
if (idx == 0) {
$('table#tbl TBODY')
.append('<tr class="treegrid-' + i + ' treegrid-expanded"><td>' + elem.Tops + '</td><td><input type="text" class="info" value="' + elem.Jacket + '" id="' + i + 'a"></input></td><td><input type="text" class="info" value="' + elem.Flap + '" id="' + i + 'b"></input></td><td><input type="text" class="info" value="' + elem.Premium + '" id="' + i + 'c"></input></td><td><input type="text" class="info" value="' + elem.NonPrint + '" id="' + i + 'd"></input></td><td><input type="text" class="info" value="' + elem.Regular + '" id="' + i + 'e"></input></td></tr>');
i = i + 1;
} else {
$('table#tbl TBODY')
.append('<tr class="treegrid-' + i + ' treegrid-expanded" id="color"><td class="box">' + elem.Tops + '</td><td class="box"><input type="text" class="info" value="' + elem.Jacket + '" id="' + i + 'a"></input></td><td><input type="text" class="info" value="' + elem.Flap + '" id="' + i + 'b"></input></td><td><input type="text" class="info" value="' + elem.Premium + '" id="' + i + 'c"></input></td><td><input type="text" class="info" value="' + elem.NonPrint + '" id="' + i + 'd"></input></td><td><input type="text" class="info" value="' + elem.Regular + '" id="' + i + 'e"></input></td></tr>');
$.getJSON('TOI.json', function(data) {
b = data;
$.each(b, function(index, elem) {
if (elem.node == i) {
$('table#tbl TBODY').append('<tr id="colorBreak1" class="treegrid-' + j + ' treegrid-parent-' + i + '" ><td>' + elem.Tops + '</td><td><input type="text" class="info" value="' + elem.Jacket + '" id="' + j + 'a"></input></td><td><input type="text" class="info" value="' + elem.Flap + '" id="' + j + 'b"></input></td><td><input type="text" class="info" value="' + elem.Premium + '" id="' + j + 'c"></input></td><td><input type="text" class="info" value="' + elem.NonPrint + '" id="' + j + 'd"></input></td><td><input type="text" class="info" value="' + elem.Regular + '" id="' + j + 'e"></input></td></tr>');
j = j + 1;
}
});
i = i + 1;
});
}
});
});
</script>
<div id="scroll" class="col-xs-12">
<table id="tbl" class="tree table table-striped table-bordered">
<thead>
<tr>
<th class="header" href="">Tops</th>
<th class="header">Jacket</th>
<th class="header">Flap</th>
<th class="header">Premium</th>
<th class="header">Non Print</th>
<th class="header">Regular</th>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>

Instead of:
$.getJSON(
'JsonDataBlocks.json',
function(data) {
use:
$.getJSON('JsonDataBlocks.json')
.done(data) { ... }
and do that for your subsequent $.getJSON call. $.getJSON is asynchronous, so nothing that relies on the data will work unless you implement it after the data is returned.

jquery append does not append large html comming from a for loop

It´s is not very clear to me why I am not get any data appended when I have a lot of data to be appended.
When I have 3 objects It works fine, for a larger number it does not append data.
I believe that append is been called before the for loop is finished. Could be that?
building the <tr>'s:
for (var i = 0; i < obj.length; i++) {
if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
} else {
trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
}
}
appending:
$('#tblBusca').append(trs);

Try appending row by row
for (var i = 0; i < obj.length; i++) {
var trs;
if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
} else {
trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
}
$('#tblBusca').append(trs);
}