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 ;-)
加载中,请稍侯......
精彩评论