Dojo Table not Rendering in IE6
-
05-07-2019 - |
Question
I'm trying to use Dojo (1.3) checkBoxes to make columns appear/hide in a Dojo Grid that's displayed below the checkBoxes. I got that functionality to work fine, but I wanted to organize my checkBoxes a little better. So I tried putting them in a table. My dojo.addOnLoad function looks like this:
dojo.addOnLoad(function(){
var checkBoxes = [];
var container = dojo.byId('checkBoxContainer');
var table = dojo.doc.createElement("table");
var row1= dojo.doc.createElement("tr");
var row2= dojo.doc.createElement("tr");
var row3= dojo.doc.createElement("tr");
dojo.forEach(grid.layout.cells, function(cell, index){
//Add a new "td" element to one of the three rows
});
dojo.place(addRow, table);
dojo.place(removeRow, table);
dojo.place(findReplaceRow, table);
dojo.place(table, container);
});
What's frustrating is:
- Using the Dojo debugger I can see that the HTML is being properly generated for the table.
- I can take that HTML and put just the table in an empty HTML file and it renders the checkBoxes in the table just fine.
- The page renders correctly in Firefox, just not IE6.
The HTML that is being generated looks like so:
<div id="checkBoxContainer">
<table>
<tr>
<td>
<div class="dijitReset dijitInline dijitCheckBox"
role="presentation" widgetid="dijit_form_CheckBox_0"
wairole="presentation">
<input class="dijitReset dijitCheckBoxInput"
id="dijit_form_CheckBox_0"
tabindex="0" type="checkbox"
name="" dojoattachevent=
"onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
dojoattachpoint="focusNode" unselectable="on"
aria-pressed="false"/>
</div>
<label for="dijit_form_CheckBox_0">
Column 1
</label>
</td>
<td>
<div class="dijitReset dijitInline dijitCheckBox"
role="presentation" widgetid="dijit_form_CheckBox_1"
wairole="presentation">
<input class="dijitReset dijitCheckBoxInput"
id="dijit_form_CheckBox_1"
tabindex="0" type="checkbox"
name="" dojoattachevent=
"onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
dojoattachpoint="focusNode" unselectable="on"
aria-pressed="false"/>
</div>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
I would have posted to the official DOJO forums, but it says they're deprecated and they're using a mailing list now. They said if a mailing list doesn't work for you, use StackOverflow.com. So, here I am!
Solution
It looks like you forgot to create a <tbody>
element.
OTHER TIPS
I also encountered this issue when trying to generate a table using dojo in IE7. The html is there but nothing is rendered. Again, the solution is to use thead, tbody tags.