i have a code to dynamically add table rows when user clicks add row button. This will happen in below scenario. My function will direct the flow into 3 different way based on received json reponse
- if response length is more than 0 and has key called "actual" .. then i will populate the received response in pop up window in read only mode. with hide add row button
- if response length is more than 0 and does not has key called "actual" .. then i will populate the received response in pop up window in editable mode with add row button visibility mode 3.if response length is equal to 0 and does not has key called "actual" .. then i will append one table row in pop up window with addrow.
When i was in flow 2, and click add row button --> that time it add one row later i moved to flow 3 , and click add row button once --> i am getting two row added, and again i am moving to flow 2 and click add row button --. that time i get 3 row when click add row button. So each time its incrementing by one. Please help to find a bug. Quick help will be very much appreciated!
$(document).on("click", ".popup-trigger", function(e) {
$("#sino").val($(this).closest('tr').children()[1].textContent);
$("#iname").val($(this).closest('tr').children()[2].textContent);
$("#icode").val($(this).closest('tr').children()[3].textContent);
$("#recqty").val($(this).closest('tr').children()[4].textContent);
var irepno = $('#irepno').val();
var icode = $('#icode').val();
var sino = $('#sino').val();
var inspinp = new Object();
inspinp.sino = sino;
inspinp.irepno = irepno;
inspinp.icode = icode;
//Call PopulateTable2 servlet to get the Inspection row details
$.ajax({
url: 'PopulateTable2',
type: 'POST',
dataType: 'json',
data: JSON.stringify({
"inspinp": inspinp
}),
contentType: 'application/json',
mimeType: 'application/json',
success: function(responseJson) {
if (responseJson.length != 0) {
if (responseJson && responseJson[0] && responseJson[0].actual1) {
// find reponseJson as actual values; if found, then made that as read only(i.e., inspection data exist)
$("#tab_logic").find("tr:gt(0)").remove();
var tableinsp = $("#tab_logic");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['parameters']);
rowNew.children().eq(1).text(value['specifications']);
rowNew.children().eq(2).text(value['actual1']);
rowNew.children().eq(3).text(value['actual2']);
rowNew.children().eq(4).text(value['actual3']);
rowNew.children().eq(5).text(value['actual4']);
rowNew.children().eq(6).text(value['actual5']);
rowNew.appendTo(tableinsp);
});
$("#addrow").hide();
$("#save").hide();
} else {
// else, received response only criteria from QC_CRITERIA table and made it as user editable form
$("#tab_logic").find("tr:gt(0)").remove();
var tableinsp = $("#tab_logic");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['parameters']);
rowNew.children().eq(1).text(value['specifications']);
rowNew.children().eq(2).html('<input type="text" list="combo-options" id="inpact10" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
rowNew.children().eq(3).html('<input type="text" list="combo-options" id="inpact20" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
rowNew.children().eq(4).html('<input type="text" list="combo-options" id="inpact30" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
rowNew.children().eq(5).html('<input type="text" list="combo-options" id="inpact40" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
rowNew.children().eq(6).html('<input type="text" list="combo-options" id="inpact50" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
rowNew.children().eq(7).html('<img src="delete.gif" height="42" width="42" alt="idata" class="del">');
rowNew.appendTo(tableinsp);
});
$("#addrow").show();
$("#save").show();
}
// return false;
} else {
$("#tab_logic").find("tr:gt(0)").remove();
$('#tab_logic tbody').append('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
$("#addrow").show();
$("#save").show();
}
}
});
// Popup Window
var scrollTop = '';
var newHeight = '100';
$(window).bind('scroll', function() {
scrollTop = $(window).scrollTop();
newHeight = scrollTop + 100;
});
// $('.popup-trigger').click(function(e) {
e.stopPropagation();
$('.popup').after('<div class="page-cover"></div>');
if (jQuery(window).width() < 767) {
$(this).after($(".popup"));
$('.popup').show().addClass('popup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $('.popup').offset().top
}, 500);
} else {
$('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
};
// });
//script for close button
$('html, .popup-btn-close').click(function(e) {
$('.popup').hide();
$('.page-cover').detach();
window.opener.location.reload();
});
//script for save button
$('html, #save').click(function(e) {
// alert("i am");
// add code here
});
//script for addrow button
$('html, #addrow').click(function(e) {
$('#tab_logic tr:last').after('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
});
$('.popup').click(function(e) {
e.stopPropagation();
});
});[![Flow 1 - add row - gives one row[![another one flow - see by default it has one row when pop up open - when click add row ; now its adding twice][1]][1]][1]
