Dynamically injected dojo widget not parsed in IE8_问答_开发者

When I dynamically inject the widget into the page. The console will print error like below:

====================================== [object Error]

Error parsing in _ContentSetter#Setter_dijit_TitlePane_0_pane_0[object Error] Error undefined running custom onLoad code: This deferred has already been resolved

==========================================

I test it with IE8, Chrome(10.0.648.205) , FireFox? 3.6.16 with dojo1.6, this bug only happens in the IE8.

Below is my test jsp file:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>test ie</title>
<style type="text/css">
    @import "../dojo16/dijit/themes/claro/claro.css";
    @import "../dojo16/dojo/resources/dojo.css"
    @import "../dojo16/dojox/grid/resources/Grid.css";
    @import "../dojo16/dojox/grid/resources/claroGrid.css";
</style>
<script type="text/javascript" src="../dojo16/dojo/dojo.js"
        djConfig="parseOnLoad: true">

</script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.Dialog");
    dojo.require("dojox.data.HtmlStore");
    dojo.require("dojox.grid.DataGrid");

        dojo.addOnLoad(function() {             
                var reportDiv = dojo.byId("report");
                reportDiv.innerHTML = "<H1>Network St开发者_开发百科atistics Report</H1><table style='display:none' id='W3_TAB_STAGEN_source_table'>"
                + "<thead><tr><th>name</th><th>value</th></tr></thead>"
                + "<tbody<tr><td>Report Name</td><td>Whole Network View</td></tr></tbody>"
                + "</table><div dataId='W3_TAB_STAGEN_source_table' jsId='W3_TAB_STAGEN_store' dojoType='dojox.data.HtmlStore'></div>"
                + "<script type='text/javascript'>"
                +                               "var W3_TAB_STAGEN_layout = [["
                +       "                               {"
                +       "                                       field : 'name', "
                +   "                                   name : 'Name', "
                +   "                                   width : '50%', "
        +       "                                       headerStyles : 'text-align: center' "
        +       "                               },"
                +   "                                   {"
                +       "                                   field : 'value',"
                +   "                                   name : 'Value',"
                +   "                                   width : '50%', "
                +   "                                   headerStyles : 'text-align: center' "
                +   "               }"
                +   "                           ]] ; "
                +   " </scr" + "ipt>"           
                +   "       <div style='margin: 5px; width: 50%' title='General Information' dojoType='dijit.TitlePane'>"
                +   "<table rowCount='1' query='{}' structure='W3_TAB_STAGEN_layout' store='W3_TAB_STAGEN_store' columnReordering='true' autoHeight='true' dojoType='dojox.grid.DataGrid' class='grid' id='W3_TAB_STAGEN'></table>"
                +   "</div>";


                var scriptStr = dojo.query("script", reportDiv)[0].innerHTML;
                console.log(scriptStr);
                dojo.eval(scriptStr);
                dojo.parser.parse(reportDiv);
        });
</script>
</head>
<body class="claro">
        <!-- menu -->
        <table style="width: 100%">
                <tbody>
                        <tr>
                                <td style="width: 100%;">
                                        <div id="menubar"></div>
                        </tr>
                        </td>
                </tbody>
        </table>

        <BR>
        <div id="report" style="width: 100%; height: 100%">
        </div>
</body>
</html>

Could someone give me any hint how to workaround this problem.

Best Regards Ryan

You may have a good reason for doing it the way you have (okay.. good-ish), but I don't understand why have you put W3_TAB_STAGEN_layout inside the HTML/Javascript string?

<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.Dialog");
    dojo.require("dojox.data.HtmlStore");
    dojo.require("dojox.grid.DataGrid");

    var W3_TAB_STAGEN_layout = [[
        {
            field : 'name', 
            name : 'Name', 
            width : '50%',
            headerStyles : 'text-align: center'
        },
        {
            field : 'value',
            name : 'Value',
            width : '50%',
            headerStyles : 'text-align: center'
        }
        ]];


        dojo.addOnLoad(function() {             
                var reportDiv = dojo.byId("report");
                reportDiv.innerHTML = "<H1>Network Statistics Report</H1><table style='display:none' id='W3_TAB_STAGEN_source_table'>"
                + "<thead><tr><th>name</th><th>value</th></tr></thead>"
                + "<tbody<tr><td>Report Name</td><td>Whole Network View</td></tr></tbody>"
                + "</table><div dataId='W3_TAB_STAGEN_source_table' jsId='W3_TAB_STAGEN_store' dojoType='dojox.data.HtmlStore'></div>"
                + "<div style='margin: 5px; width: 50%' title='General Information' dojoType='dijit.TitlePane'>"
                +   "<table rowCount='1' query='{}' structure='W3_TAB_STAGEN_layout' store='W3_TAB_STAGEN_store' columnReordering='true' autoHeight='true' dojoType='dojox.grid.DataGrid' class='grid' id='W3_TAB_STAGEN'></table>"
                +   "</div>";

    /*
                var scriptStr = dojo.query("script", reportDiv)[0].innerHTML;
                console.log(scriptStr);
                dojo.eval(scriptStr);
    */
                dojo.parser.parse(reportDiv);
        });
</script>

This fixes the problem on IE8. I don't know what specifically caused the problem, but I'm guessing IE chokes on your HTML->Javascript->HTML->Javascript arrangement for some reason.. for once I'll agree with IE, it's.. uh.. a bit of a mess ;-)