是否有一个有效的dojo tabContainer可以在contentPane中成功重新加载?

时间:2012-06-04 22:31:04

标签: javascript dom dojo

我并不懒惰但尝试了很多方法尝试重新加载包含dojo TabContainer(id = dojoTabbedPane)的div(id = refreshable)。每次重新加载页面后,每个选项卡中的所有内容都会显示一个堆栈(缺少选项卡)。

我做了一些研究,提出问题,并在jQuery加载之前使用dijit.byId("dojoTabbedPane").destroyRecursive();,然后在重新加载后调用dojo.parser.parse(dojo.byId("dojoTabbedPane"));但从不起作用。

那么,请问,任何人都可以共享一个简单的片段,实际上可以告诉我tabContainer可以看起来它的容器是否刷新了吗?我发誓我尝试了许多理论方法,它应该可以工作,但任何人都可以告诉我一个非常简单的代码,让我看到它有效吗?

我不知道如何在这里粘贴大块代码,否则我会给出一个基本样本,所以每个人都有兴趣可以帮忙修改,这里我准备了一个来自Dojo网站的tabContainer,请帮我解决。谢谢!!

<script type="text/javascript" 
src="dojo/dojo/dojo.js"  
djConfig="parseOnLoad: true"></script> 

<script type="text/javascript" >
function refresh_data(url, id) {
j('#'+id).load(url+' #'+id+' > *', function (response) {
      dojo.parser.parse(dojo.byId("dojoTabbedPane"));
});
}
</script>
<script type="text/javascript">
    var login_url = '<spring:url value="/login" />';

    j(function() {
        setInterval('refresh_data("file:///D:/Dojo/dojo.tabbed.pane_very_good.html?hash="+Math.random(), "refreshable");', 9000); 
    });
    // this disables errors in IE7
    function noError(){return true;}
    window.onerror = noError;
</script>
<style type="text/css"> 
@import "dojo/dijit/themes/tundra/tundra.css"; 
</style>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">
    <!-- this div is only for documentation purpose, in real development environments, just take it out -->
<div style="width: 350px; height: 300px">
<div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit.layout.ContentPane" title="My first tab" selected="false">
        Lorem ipsum and all around...
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" title="My second tab"  selected="true">
        Lorem ipsum and all around - second...
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" title="My last tab" closable="true">
        Lorem ipsum and all around - last...
</div>
</div>
</div>
</body>

1 个答案:

答案 0 :(得分:2)

关于jQuery的一个问题,无论是否已经在完成回调运行时已经设置了#replaceable的innerHTML ..但只需将超时行取消注释即可解除&#39; unhook&#39;并在调用解析器之前让加载机制完成。所以试试这个:

<div id="replaceable">

</div>

<script>
function refresh_data(url, id) {

  var w = dijit.byId("dojoTabbedPane"),
      domNode = dojo.byId(id);
  if(w)  w.destroyRecursive();

  j(domNode).load(url+' #'+id+' > *', function (response) {
      // setTimeout(function() {
         dojo.parser.parse(domNode);
         w = dijit.byId("dojoTabbedPane");
         w.resize(dojo.getMarginBox(domNode));
      // }, 200);

  });
}

dojo.addOnLoad(function() {
    var login_url = '<spring:url value="/login" />';
    setInterval('refresh_data("file:///D:/Dojo/dojo.tabbed.pane_very_good.html?hash="+Math.random(), "refreshable");', 9000); 
});
</script>