In the jsp, I have two tables for two different type of users (administrator and secretary) to view. Those tables has checkbox for download multiple files.
I have a strange (I think) situation which is only one type of user (administrator) can check all checkboxes by click the checkbox near the first table column.
I would like to show you the code about those table first.
<script type="text/javascript">
$(document).ready(function() {
$("#clickAll").click(function() {
if($(this).is(':checked'))
{
$("input[name='chkdownload']").each(function() {
$(this).attr("checked",true);
});
}
else
{
$("input[name='chkdownload']").each(function() {
$(this).attr("checked",false);
});
}
});
});
var countChecked = function() {
var n = $( "input:checked" ).length;
if (n == 0) {
alert("Please click at least one record.");
return false;
} else {
return true;
}
};
</script>
<div class="content">
<s:form namespace="/DownloadFile" action="download_getSelectedFile" method="POST" enctype="multipart/form-data">
<!--for administrator users to view -->
<div class="usrAdmin usrAccess" style="display:none">
<display:table name="${equipmentList}" class="its" uid="row"
sort="list" pagesize="10" requestURI="equipment_view" export="false" defaultsort="1" defaultorder="descending">
<display:columntitle="<input type='checkbox' name='selectall' id='clickAll'/>"><s:checkbox theme="simple" name="chkdownload" fieldValue='%{#attr.row.recordId}' /></display:column>
<display:column property="equipName" title="Equipment Name" />
<display:column property="equipLocation" title="Equipment Location" />
<display:column property="equipOfficer" title="Equipment Officer" />
</display:table>
</div>
<!--for secretary users to view -->
<div class="usrSec usrAccess" style="display:none">
<!-- put row2 to make the table uid unique -->
<display:table name="${equipmentList}" class="its" uid="row2"
sort="list" pagesize="10" requestURI="equipment_view" export="false" defaultsort="1" defaultorder="descending">
<display:column title="<input type='checkbox' name='selectall' id='clickAll'/>"><s:checkbox theme="simple" name="chkdownload" fieldValue='%{#attr.row.recordId}' /></display:column>
<display:column property="equipName" title="Equipment Name" />
<display:column property="equipLocation" title="Equipment Location" />
<display:column property="equipOfficer" title="Equipment Officer" />
</display:table>
</div>
<input type="submit" value="Download Selected"/>
</s:form>
</div>
When I run the program, if I switch to secretary mode, I click the checkbox near the header column, it does not checked all checkboxes. It just shows a "tick" symbol in the checkbox only. However if I switch to administrator mode, I click the checkbox, it can checked all checkboxes.
At the beginning, I think maybe I mistype the incorrect name in jquery, but I review the code, both table are call the same input "chkdownload".
I have read the solution from this and this post, but I think my case is different to them.
Which part I did wrong in the code? It seems no typo error there. Otherwise, the checkbox in administrator mode will not work too.
Would someone let me know my mistake, please?
Update
I follow the instruction suggest by @reporter. I copy the html source code from Internet Explorer (IE). I see more code are generated and I would like to show it below for your review please. Thank you.
<div class="content">
<form id="download_getSelectedFile" name="download_getSelectedFile" onsubmit="return(countChecked());beginDownload();" action="/RIDW/Download/download_getSelectedFile.action" method="POST" enctype="multipart/form-data">
<!--for administrator users to view -->
<div class="usrAdmin usrAccess" style="display:none;">
<span class="pagebanner">2 records found, displaying all pages.</span>
<span class="pagelinks">Page 1</span>
<table id="row" class="its">
<thead>
<tr>
<th><input type='checkbox' name='selectall' id='clickAll'/></th>
<th class="sortable">
<a href="equipment_view?d-16544-s=1&d-16544-o=2&d-16544-p=1">Equipment Name</a></th>
<th class="sortable">
<a href="equipment_view?d-16544-s=2&d-16544-o=2&d-16544-
p=1">Location</a></th>
<th class="sortable sorted order2">
<a href="equipment_view?d-16544-s=3&d-16544-o=2&d-16544-
p=1">Equipment Officer</a></th></tr></thead>
<tbody>
<tr class="odd">
<td><input type="checkbox" name="chkdownload" value="427b0a45dd714d95bd11374b5a2d56b4" id="download_getSelectedFile_chkdownload"/><input type="hidden" id="__checkbox_download_getSelectedFile_chkdownload" name="__checkbox_chkdownload" value="427b0a45dd714d95bd11374b5a2d56b4" /></td>
<td>Equipment 001</td>
<td>Location A-1</td>
<td>Officer A</td></tr>
<tr class="even">
<td><input type="checkbox" name="chkdownload"
value="76f888d5bb3740aabef70c5f50bea7d9"
id="download_getSelectedFile_chkdownload"/><input type="hidden"
id="__checkbox_download_getSelectedFile_chkdownload"
name="__checkbox_chkdownload" value="76f888d5bb3740aabef70c5f50bea7d9" />
</td>
<td>Equipment 002</td>
<td>Location A-2</td>
<td >Officer S</td></tr>
</tbody></table>
</div>
<!--for secretary users to view -->
<div class="usrSec usrAccess" style="display:none;">
<span class="pagebanner">2 records found, displaying all pages.</span>
<span class="pagelinks">Page 1</span>
<!-- put row2 to make the table id unique -->
<table id="row2" class="its">
<thead>
<tr>
<th><input type='checkbox' name='selectall' id='clickAll'/></th>
<th class="sortable">
<a href="equipment_view?d-16544-s=1&d-16544-o=2&d-16544-p=1">Equipment Name</a></th>
<th class="sortable">
<a href="equipment_view?d-16544-s=2&d-16544-o=2&d-16544-p=1">Location</a></th>
<th class="sortable sorted order2">
<a href="equipment_view?d-16544-s=3&d-16544-o=2&d-16544-p=1">Equipment Officer</a></th></tr></thead>
<tbody>
<tr class="odd">
<td ><input type="checkbox" name="chkdownload" value="427b0a45dd714d95bd11374b5a2d56b4" id="download_getSelectedFile_chkdownload"/><input type="hidden" id="__checkbox_download_getSelectedFile_chkdownload" name="__checkbox_chkdownload" value="427b0a45dd714d95bd11374b5a2d56b4" /></td>
<td >Equipment 001</td>
<td >Location A-1</td>
<td >Officer A</td></tr>
<tr class="even">
<td ><input type="checkbox" name="chkdownload" value="76f888d5bb3740aabef70c5f50bea7d9" id="download_getSelectedFile_chkdownload"/><input type="hidden" id="__checkbox_download_getSelectedFile_chkdownload" name="__checkbox_chkdownload" value="76f888d5bb3740aabef70c5f50bea7d9" /></td>
<td >Equipment 002</td>
<td>Location A-2</td>
<td >Officer S</td></tr>
</tbody></table>
</div>
<br>
<input type="submit" value="Download Selected"/>
</form>
</div>
Update 2
For Secretary table, in jsp code, I put row2 for uid and in html source code I put row2 for id. I run the application, that table still cannot check all checkboxes whereas the other table works fine.
Although I have updated the code in the content, I extract the exact the code about the id part below for your quick review please. Thank you.
The code in jsp
<!--for administrator users to view -->
<display:table name="${equipmentList}" class="its" uid="row"
sort="list" pagesize="10" requestURI="equipment_view" export="false" defaultsort="1" defaultorder="descending">
<!--for secretary users to view -->
<display:table name="${equipmentList}" class="its" uid="row2"
sort="list" pagesize="10" requestURI="equipment_view" export="false" defaultsort="1" defaultorder="descending">
The code in html source code
<!--for administrator users to view -->
<table id="row" class="its">
<!--for secretary users to view -->
<table id="row2" class="its">
