jQuery not working without Alert() - javascript

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

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>

in directive, ng-click fires multiple times angularjs

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 to append indexes of an array into a <td> where select options are indexes of the array

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)

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);
}

Categories

Resources