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.
Related
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;
}
`
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>
I am creating a directive, which is used to add and remove elements dynamically. But my ng-click fires multiple times while adding and removing elements. Please give suggestions.
Here enable values means to select when 1=>textbox; 2=>selectbutton;3=>Radio button; 4=>CheckBox;5=>+/-
HTML:
<body ng-app = "mainApp" ng-controller = "loginController">
<div id="sampleeid">
<incrementrowsdirective idvalue="sto"
arrayvalues='[]'
labelvalues='["Concepto","Monto","Add/Remove"]'
enablevalues='[2,1,5]'></incrementrowsdirective>
<button ng-click="SampleButton()">Sample
Button</button>
</div>
CODE:
gasapp.directive("incrementrowsdirective", function ($compile) {
var trheaderelements;
var tablenm;
var tablenm1;
var trelements;
var trfirstelement;
var firstelement;
return {
restrict: 'AE',
scope: {
idvalue: '#'
},
template: function (elem, attr) {
return '<div class="col-md-8 col-sm-11 col-xs-11"><table id="tableheaderid"></table> <table id="tableid' + attr.idvalue + '" class="table table-condensed table-striped table-bordered table-hover no-margin">' +
'</table></div>'
},
link: function (scope, iElement, iAttrs) {
scope.labelval = JSON.parse(iAttrs.labelvalues);
scope.enableval = JSON.parse(iAttrs.enablevalues);
scope.arrt = JSON.parse(iAttrs.arrayvalues);
scope.c = 0;
scope.count = 1;
trheaderelements = '<thead><tr id="mytrheader' + scope.idvalue + '" >';
angular.forEach(scope.labelval, function (value, key) {
trheaderelements = trheaderelements + '<th style="width: 20%;"> ' + value + ' </th>';
});
trheaderelements = trheaderelements + "</tr></thead>";
tablenm = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trheaderelements);
$compile(tablenm)(scope);
trfirstelement = "<tr id='mytrfirstelement'>";
angular.forEach(scope.enableval, function (value, key) {
if (value == 1) {
trfirstelement = trfirstelement + '<td><input type="text" name="text1name' + scope.idvalue + value + key + '" ng-model="text1value' + scope.idvalue + value + key + '" id="text1valueeid' + scope.idvalue + value + key + '" > </td>';
}
if (value == 2) {
trfirstelement = trfirstelement + '<td><select id="selectid1value' + scope.idvalue + value + key + '" name="selectname1val' + scope.idvalue + value + key + '" ng-model="selectmodel1val' + scope.idvalue + value + key + '" style="width:185px;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trfirstelement = trfirstelement + '<td><input type="radio" id="radio1idvalue' + scope.idvalue + value + key + '" name="radio1nameval' + scope.idvalue + value + key + '" ng-model="radio1modelval' + scope.idvalue + value + key + '" > </td>';
}
if (value == 4) {
trfirstelement = trfirstelement + '<td><input type="checkbox" id="checkbox1idval' + scope.idvalue + value + key + '" name="checkbox1nameval' + scope.idvalue + value + key + '" ng-model="checkbox1modelval' + scope.idvalue + value + key + '"> </td>';
}
if (value == 5) {
trfirstelement = trfirstelement + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + value + key + '" ng-click="addRow1(' + scope.c + ')">' +
' </td>';
}
});
trfirstelement = trfirstelement + "</tr>";
firstelement = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trfirstelement);
$compile(firstelement)(scope);
trfirstelement = '';
scope.addRow1 = function (a) {
scope.c++;
scope.count++;
trelements = '<tr id=mytr' + scope.idvalue + scope.c + '>';
angular.forEach(scope.enableval, function (value, key) {
scope.keyvalue = key;
if (value == 1) {
trelements = trelements + '<td><input type="text" name="text1name' + scope.idvalue + scope.c + value + key + '" ng-model="text1value' + scope.idvalue + scope.c + value + key + '" id="text1valueeid' + scope.idvalue + scope.c + value + key + '" > </td>';
}
if (value == 2) {
trelements = trelements + '<td><select id="selectid' + scope.idvalue + scope.c + value + key + '" name="selectname' + scope.idvalue + scope.c + value + key + '" ng-model="selectmodel' + scope.idvalue + scope.c + value + key + '" style="width:100%;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trelements = trelements + '<td><input type="radio" id="radioid' + scope.idvalue + scope.c + value + key + '" ></input> </td>';
}
if (value == 4) {
trelements = trelements + '<td><input type="checkbox" id="checkboxid' + scope.idvalue + scope.c + value + key + '" name="aaa" ></input> </td>';
}
if (value == 5) {
trelements = trelements + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + scope.c + value + key + '" ng-click="addRow1(' + scope.c + ')">' + ' <input type="button" value="-" ng-click="removerowbutton1(' + scope.c + ')" > </td>';
}
});
trelements = trelements + "</tr>";
tablenm1 = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trelements);
$compile(tablenm1)(scope);
trelements = '';
}
scope.removerowbutton1 = function (index) {
//scope.c--;
alert("Removed")
var myEl = angular.element(document.querySelector('#mytr' + scope.idvalue + index));
myEl.remove();
}
}
};
});
Need to remove the lines,
$compile( firstelement )( scope );
$compile( tablenm1 )( scope );
and replace the line with
firstelement = angular.element(document.getElementById('tableid'+scope.idvalue)).append($compile(trfirstelement)(scope));
I want a situation where I can append the indexes of an array as options in a select. The code below fails.
<?php
$str4 = "select * from fee_names where status = '1' ";
$res4 = mysql_query($str4) or die(mysql_error());
while ($r4 = mysql_fetch_assoc($res4)){
$name = $r4['NAME'];
array_push($fee_nameArray,$name);
}
>?
<input type="text" name="fee_name" id="fee_name" value="<?php echo $fee_nameArray; ?>">
$('#addClasses').click(function(){
var arrayNAme = $('#fee_name').val();
//alert(arrayNAme.length); return false;
row++;
$('#count').val(row);
var feeName = "feeName"+row;
var feeCat = "feeCat"+row;
var freq = "freq"+row;
var others = "others"+row;
var mandate = "mandate"+row;
var rowID = "rowID"+row;
$('#table_mile35').prepend('<tr id="' + rowID + '"><td><select class="form-control" id="' + feeName + '" name="' + feeName + '" required><option value="" selected="selected">--Choose Class--</option>'
for (i = 0; i < arrayNAme.length; i++) {
'<option value="' + arrayNAme[i] + '">' + arrayNAme[i] + '</option>'
}
'</select></td><td><input type="text" class="form-control input-sm " name="' + feeCat + '" id="' + feeCat + '" placeholder="school fees related, club related" required></td><td><input type="text" class="form-control input-sm " name="' + freq + '" id="' + freq + '" placeholder="Yearly, Monthly" required></td><td><textarea type="text" class="form-control input-sm" name="' + others + '" id="' + others + '" placeholder="other relevant information" ></textarea></td><td><input type="checkbox" name="' + mandate + '" id="' + mandate + '" value="1"></td></tr>');
});
if arrayNAme is an array, Use like this:
$('#addClasses').click(function(){
var arrayNAme = $('#fee_name').val();
arrayNAme = arrayNAme.split(',');
row++;
$('#count').val(row);
var feeName = "feeName"+row;
var feeCat = "feeCat"+row;
var freq = "freq"+row;
var others = "others"+row;
var mandate = "mandate"+row;
var rowID = "rowID"+row;
var html = '<tr id="' + rowID + '"><td><select class="form-control" id="' + feeName + '" name="' + feeName + '" required><option value="" selected="selected">--Choose Class--</option>';
for (i = 0; i < arrayNAme.length; i++) {
html += '<option value="' + arrayNAme[i] + '">' + arrayNAme[i] + '</option>';
}
html += '</select></td><td><input type="text" class="form-control input-sm " name="' + feeCat + '" id="' + feeCat + '" placeholder="school fees related, club related" required></td><td><input type="text" class="form-control input-sm " name="' + freq + '" id="' + freq + '" placeholder="Yearly, Monthly" required></td><td><textarea type="text" class="form-control input-sm" name="' + others + '" id="' + others + '" placeholder="other relevant information" ></textarea></td><td><input type="checkbox" name="' + mandate + '" id="' + mandate + '" value="1"></td></tr>';
$('#table_mile35').prepend(html);
});
I am supposing value of arrayNAme is comma seperated (for example: Tuition Fee,Book Fee,Registration Fee)
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);
}