I have multiple check boxes which are formed based on the iteration from the collection by the foreach loop of the core tags in jsp with two parameters ID(which is the id of the textbox) and key .Both Id and key are populated dynamically based on iteration . Oncheck, it calls a function having AJAX code .and the response from ajax which is a JSON and the JSON is populated dynamically on same div based on the key.I am using tabed view similar to what you can find in,https://www.w3schools.com/howto/howto_js_tabs.asp. These tabs are also dynamically controlled by id's of checkboxes. If checkbox is clicked,button is visible and vice-versa.(Note:Button also fires ajax call)The problem which I am facing right now is, if i am disabling the checkbox,the div is retaining the value of the old key.I know the problem is with design of my code.Can any one say how can it be re-designed.I will attach the code for reference:
function enableButton(id, key) {
openError(key);
if (!flag) {
document.getElementById("resultTab").style.display = 'block';
}
if (flag){
document.getElementById(id).checked = false;
}
var lastCharacterOfId = document.getElementById(id).id.charAt(document
.getElementById(id).id.length - 1);
var checkBox = document.getElementById(id);
var button = document.getElementById("btn_" + lastCharacterOfId);
if (checkBox.checked) {
$("#good").html('');
button.style.display = 'block';
button.disabled = false;
counterForScript++;
//openError(key);
} else {
$("#good").html('');
button.style.display = 'none'
button.disabled = true;
if(!flag){
counterForScript--;
}
if (counterForScript > 0) {
console.log(checkBoxKeyArray[counterForScript]);
}
}
if (counterForScript == 0) {
document.getElementById("resultTab").style.display = 'none';
}
function openError(key) {
if ($("#aFile").get(0).files.length == 0) {
alert("Please select a file ");
flag = true;
return false;
}
if ($("#aFile").val().substring($("#aFile").val().lastIndexOf(".") + 1,
$("#aFile").val().length) != 'log') {
alert("Please select only Log Files");
flag = true;
return false;
}
$("#good").html('');
var length = 0;
$(document)
.ready(
function() {
$.ajax({
type : "POST",
enctype : 'multipart/form-data',
url : "uploadServlet",
data : formData,
processData : false,
contentType : false,
cache : false,
timeout : 600000,
dataType : 'json',
success : function(data) {
$("#good").append("<br><span align=\"left\" style=\"margin-left:1%\">Total Number of occurences of the search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
+ key
+ "</font>: "
+ data.length
+ "</span>");
if (data.length > 0) {$("#good").append(
"<p align=\"left\" style=\"margin-left:1%;margin-top:4%\">Your search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
+ key
+ "</font> can be found in Line Numbers:");
}
$
.each(
data,
function(id,
element) {
$("#good")
.append(
"<span style=\"margin-left:1%;\">"
+ element
+ "</span></p>");
});
},
});
});
}
HTML CODE:
FILE:
<p>
<font style="font-weight: bold;">SEARCH:</font>
<c:forEach var="hm" items="${logAnalysisHashMap}">
<c:set var="count" value="${count + 1}" scope="page" />
<input type="checkbox" id="cb_${count}"
onchange="enableButton(this.id,'${hm.key}');" />
<font style="font-weight: bold; text-transform: uppercase;">
${hm.key} </font>
</c:forEach>
</p>
</div>
<div class="tab" id="resultTab"
style="width: 90%; margin-left: 5%; height: 40%; margin-top: 2%; position: relative; overflow: auto; display: none">
<div style="display: block; clear: both;">
<c:forEach var="hm" items="${logAnalysisHashMap}">
<c:set var="countbtn" value="${countbtn + 1}" scope="page" />
<button class="tablinks" id="btn_${countbtn}"
onclick='openError("${hm.key}");' style="display: none;"
disabled>
<font style="font-weight: bold; text-transform: uppercase;">${hm.key}
</font>
</button>
</c:forEach>
</div>
