Dojo Table not Rendering in IE6

Posted by Mike Carey on Stack Overflow See other posts from Stack Overflow or by Mike Carey
Published on 2009-07-30T18:35:30Z Indexed on 2010/04/13 18:13 UTC
Read the original article Hit count: 551

Filed under:
|
|
|
|

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: 1) Using the Dojo debugger I can see that the HTML is being properly generated for the table. 2) 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. 3) 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 stackoverflos.com. So, here I am! Thanks for any insight you can provide.

© Stack Overflow or respective owner

Related posts about dojo

Related posts about grid