https://stackoverflow.com/questions/21866363
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianAh! The issue is with the float. For the dataTables_length, I removed the float: left and it showed up.
Microsoft should pay me for my 2 days time.
DataTables.net issue in IE
-
13-10-2022 - |
Question
Please forgive if my Title is wrong. I have a Telerik RadWindow as below:
<Telerik:RadWindow ID="loanEditMultiplePopup" runat="server" Modal="true" VisibleStatusbar="false"
VisibleTitlebar="false" VisibleOnPageLoad="false" AutoSize="true">
<ContentTemplate>
<table id="tblEditMultiplePopup" class="withBorder" style="width: 900px; overflow: auto;
border: 0px;">
<thead>
<tr>
<th>
<table style="width: 100%; border: 0px;" class="withBorder">
<tr>
<th style="border: 0px;">
Edit Multiple Loans
</th>
<th style="border: 0px; text-align: right;"><a class="DockCmdCancel" style="display: inline-block; width: 20px;" title="Close"
onclick='PopupClose($find("<%=loanEditMultiplePopup.ClientID%>"));'></a>
</th>
</tr>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table id="tblLoanHeaderDetails" style="width: 100%;">
<thead>
<tr>
<th>
<input type='checkbox' name='All' value='All' onclick='CheckAllLoanHeaders(this);'>
</th>
<th>
Audit Number
</th>
<th>
Loan Number
</th>
<th>
Loan Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</ContentTemplate>
</Telerik:RadWindow>
I had set up a virtual directory in my machine "appdev". I get different experience when I access the application using "http:localhost" and "http:appdev". For e.g,. below is the short version of the javascript I am trying to run.
var tblHtml = '<thead><tr><th><input name="All" onclick="CheckAllLoanHeaders(this);" type="checkbox" value="All"></th><th>Audit Number</th><th>Loan Number</th><th>Loan Status</th></tr></thead><tbody><tr><td><input name="chkLoanHeader_0" type="checkbox" value="129"></td><td>1213-POST-FHA-INT-1</td><td>112569549</td><td>In Progress</td></tr></tbody>';
$("#tblLoanHeaderDetails").html(tblHtml);
$("#tblLoanHeaderDetails").dataTable().fnDestroy(); //Remove the DataTables enhancements
$("#tblLoanHeaderDetails").dataTable({
"iDisplayLength": 25,
"bDestroy": true,
"aoColumns": [
/* checkbox */{"bSortable": false, "bSearchable": false, "bVisible": true },
/* Audit Number */{"bSortable": true, "bSearchable": true, "bVisible": true },
/* Loan Number */{"bSortable": true, "bSearchable": true, "bVisible": true },
/* Loan Status */{"bSortable": true, "bSearchable": true, "bVisible": true}],
"aaSorting": [[1, "asc"]]
});
radopen(null, "loanEditMultiplePopup");
If I run using localhost, I see the popup with the data appearing. But when I use "appdev", it does not show up the table data in popup, Infact the table's html exist, but not visible with occupying space. I tested in IE 11 & IE9 and both did not work. I see it showing up in Chrome. Inspected content from "appdev":
<div role="grid" id="tblLoanHeaderDetails_wrapper" class="dataTables_wrapper">
<div id="tblLoanHeaderDetails_length" class="dataTables_length">
<label>
Show
<select aria-controls="tblLoanHeaderDetails" size="1" name="tblLoanHeaderDetails_length"
jquery1910027183463905366134="66">
<option value="10">10</option>
<option selected value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries</label></div>
<div id="tblLoanHeaderDetails_filter" class="dataTables_filter">
<label>
Search:
<input aria-controls="tblLoanHeaderDetails" jquery1910027183463905366134="62"></label></div>
<table aria-describedby="tblLoanHeaderDetails_info" id="tblLoanHeaderDetails" class="dataTable"
style="width: 0px">
<thead>
<tr role="row">
<th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting_disabled"
style="width: 0px" tabindex="0" aria-label>
<input onclick="CheckAllLoanHeaders(this);" type="checkbox" value="All" name="All">
</th>
<th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting_asc"
style="width: 0px" tabindex="0" aria-sort="ascending" aria-label="Audit Number: activate to sort column descending"
jquery1910027183463905366134="74">
Audit Number
</th>
<th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting" style="width: 0px"
tabindex="0" aria-label="Loan Number: activate to sort column ascending" jquery1910027183463905366134="70">
Loan Number
</th>
<th role="columnheader" aria-controls="tblLoanHeaderDetails" class="sorting" style="width: 0px"
tabindex="0" aria-label="Loan Status: activate to sort column ascending" jquery1910027183463905366134="59">
Loan Status
</th>
</tr>
</thead>
<tbody role="alert" aria-relevant="all" aria-live="polite">
<tr class="odd" _dt_rowindex="0">
<td class=" ">
<input type="checkbox" value="129" name="chkLoanHeader_0">
</td>
<td class=" sorting_1">
1213-POST-FHA-INT-1
</td>
<td class=" ">
112569549
</td>
<td class=" ">
In Progress
</td>
</tr>
</tbody>
</table>
<div id="tblLoanHeaderDetails_info" class="dataTables_info">
Showing 1 to 1 of 1 entries</div>
<div id="tblLoanHeaderDetails_paginate" class="dataTables_paginate paging_two_button">
<a role="button" tabindex="0" aria-controls="tblLoanHeaderDetails" id="tblLoanHeaderDetails_previous"
class="paginate_disabled_previous" jquery1910027183463905366134="82">Previous</a><a
role="button" tabindex="0" aria-controls="tblLoanHeaderDetails" id="tblLoanHeaderDetails_next"
class="paginate_disabled_next" jquery1910027183463905366134="78">Next</a></div>
</div>
Content from "localhost"
<div class="dataTables_wrapper" id="tblLoanHeaderDetails_wrapper" role="grid">
<div class="dataTables_length" id="tblLoanHeaderDetails_length">
<label>
Show
<select name="tblLoanHeaderDetails_length" aria-controls="tblLoanHeaderDetails" size="1">
<option value="10">10</option>
<option selected="selected" value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries</label></div>
<div class="dataTables_filter" id="tblLoanHeaderDetails_filter">
<label>
Search:
<input aria-controls="tblLoanHeaderDetails" type="text"></label></div>
<table class="dataTable" id="tblLoanHeaderDetails" aria-describedby="tblLoanHeaderDetails_info"
style="width: 100px;">
<thead>
<tr role="row">
<th tabindex="0" class="sorting_disabled" role="columnheader" aria-controls="tblLoanHeaderDetails"
style="width: 0px;" aria-label="" rowspan="1" colspan="1">
<input name="All" onclick="CheckAllLoanHeaders(this);" type="checkbox" value="All">
</th>
<th tabindex="0" class="sorting_asc" role="columnheader" aria-controls="tblLoanHeaderDetails"
style="width: 0px;" aria-label="Audit Number: activate to sort column descending"
aria-sort="ascending" rowspan="1" colspan="1">
Audit Number
</th>
<th tabindex="0" class="sorting" role="columnheader" aria-controls="tblLoanHeaderDetails"
style="width: 0px;" aria-label="Loan Number: activate to sort column ascending"
rowspan="1" colspan="1">
Loan Number
</th>
<th tabindex="0" class="sorting" role="columnheader" aria-controls="tblLoanHeaderDetails"
style="width: 0px;" aria-label="Loan Status: activate to sort column ascending"
rowspan="1" colspan="1">
Loan Status
</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" ">
<input name="chkLoanHeader_0" type="checkbox" value="129">
</td>
<td class=" sorting_1">
1213-POST-FHA-INT-1
</td>
<td class=" ">
112569549
</td>
<td class=" ">
In Progress
</td>
</tr>
</tbody>
</table>
<div class="dataTables_info" id="tblLoanHeaderDetails_info">
Showing 1 to 1 of 1 entries</div>
<div class="dataTables_paginate paging_two_button" id="tblLoanHeaderDetails_paginate">
<a tabindex="0" class="paginate_disabled_previous" id="tblLoanHeaderDetails_previous"
role="button" aria-controls="tblLoanHeaderDetails">Previous</a><a tabindex="0" class="paginate_disabled_next"
id="tblLoanHeaderDetails_next" role="button" aria-controls="tblLoanHeaderDetails">Next</a></div>
</div>
If I commented the $("#tblLoanHeaderDetails").dataTable(..., the table is showing up correctly (without all the freebies of datatables).
The only visible difference when I used winmerge is adding the jquery tags for e.g., "jquery1910027183463905366134="66">" for appdev. I do not know what that is. Is this making my popup not visible? If not, what could be the problem?
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
