Question

我在两个页面中使用了dijit css for dijit / horizontalSlider，滑块在第一页中加载但在第二页中变为空白。 dojoz / data / DataGrid也在第一页中正确加载，但在第二页中变为空白。

更新：

我在home.html（父页面）中有两个按钮，并调用django模板grid.html和move.html。这是grid.html源代码

    <!DOCTYPE html>
    <html >
    <head>
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'pmda_app/dojo/../dijit/themes/claro/claro.css' %}">
    <style>
    @import "{% static 'pmda_app/dojox/grid/enhanced/resources/claro/EnhancedGrid.css' %}";
    @import "{% static 'pmda_app/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css' %}"
    <script src="{% static 'pmda_app/dojo/dojo.js' %}"></script>
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script>
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojox.grid.enhanced.plugins.Pagination");

    dojo.ready(function(){
    /*set up data store*/
    var data = {
      identifier: 'id',
      items: []
    };
    var data_list = [
       { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
       { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
       { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 60;
    for(var i=0, l=data_list.length; i<rows; i++){
       data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up layout*/
    var layout = [[
       {'name': 'Column 1', 'field': 'id'},
       {'name': 'Column 2', 'field': 'col2'},
       {'name': 'Column 3', 'field': 'col3', 'width': '230px'},
       {'name': 'Column 4', 'field': 'col4', 'width': '230px'}
    ]];

    /*create a new grid:*/
    var grid = new dojox.grid.EnhancedGrid({
     id: 'grid',
     store: store,
     structure: layout,
     rowSelector: '20px',
     }},
    document.createElement('div')
     );

    /*append the new grid to the div*/
    dojo.byId("gridDiv").appendChild(grid.domNode);

    /*Call startup() to render the grid*/
    grid.startup();
    });
    </script>
    </head>
    <body class="claro">
     <div id="gridDiv"></div>
    </body>
    </html>

以下是move.html

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    {% load staticfiles %}
    <title>Scaling, scrolling, and panning.</title>
    <link rel="stylesheet" href="{% static 'pmda_app/dijit/tests/css/dijitTests.css' %}"> 
    <link rel="stylesheet" href="{% static 'pmda_app/dojo/../dijit/themes/claro/claro.css' %}">
    <script type="text/javascript" src="{% static 'pmda_app/dojo/dojo.js' %}" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script type="text/javascript">
    dojo.require("dijit.form.HorizontalSlider");
    dojo.require("dijit.form.HorizontalRule");
    dojo.require("dijit.form.HorizontalRuleLabels");
    dojo.require("dijit.form.Button");
    dojo.require("dojo.parser"); // scan page for widgets
    dojo.require("dojox.charting.Chart");
    dojo.require("dojox.charting.axis2d.Default");
    dojo.require("dojox.charting.plot2d.Areas");
    dojo.require("dojox.charting.plot2d.Lines");
    dojo.require("dojox.charting.action2d.MouseZoomAndPan");
    dojo.require("dojox.charting.plot2d.Grid");
    dojo.require("dojox.charting.action2d.Tooltip");
    dojo.require("dojox.charting.themes.PlotKit.orange");

    makeObjects = function(){
    var data = [4,8,2,1,6,4,8,8,2,1,6,4,9,0,2,8,9,3,4,1,2,1,6,9,1,0,8,2,4,6,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1,6,4,8,2,1];
    var dates = [2013-11-19,2013-11-20,2013-11-21,2013-11-22,2013-11-25];
    chart = new dojox.charting.Chart("test");
    chart.setTheme(dojox.charting.themes.PlotKit.orange);
            chart.addAxis("x", {
                    labels: dojo.map(dates, function(value, index){
                        return {value: index + 1, text: value};    }), minorTicks:false, stroke: "green"
                    })              
            .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", minorTicks:false, stroke: "green", min: 0})
            .addSeries("UsersGraph", data,{stroke: {color: "blue", width: 1}}, {fill: "green"});
          chart.addPlot("default", {type: dojox.charting.plot2d.Lines, gap: 5});

            chart.addPlot("grid", {type: dojox.charting.plot2d.Grid, hMinorLines: true});
            new dojox.charting.action2d.Tooltip(chart, "default");
            chart.render();

     };

     dojo.addOnLoad(makeObjects);

     </script>
    </head>
    <body class="tundra">
    <div id="test" style="width: 500px; height: 300px; margin: 30px auto 0px auto;">  </div>
    <table>
    <tr><td align="center" class="pad">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
    <tr><td>
            <div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" class="clearfix" value="1" minimum="1" maximum="5" discreteValues="6" showButtons="false" style="width: 500px;">
                    <div data-dojo-type="dijit/form/HorizontalRule" container="bottomDecoration" count="5" style="height:5px;"></div>
                    <div data-dojo-type="dijit/form/HorizontalRuleLabels" container="bottomDecoration" minimum="1" maximum="5" count="5"    constraints="{pattern: '##'}" style="height:1.2em;font-size:75%;color:gray;"></div>
            </div>
    </td></tr>
    <tr><td align="center" class="pad">PAN X (<span id="offsetXValue">0</span>)</td></tr>
    <tr><td>
            <div id="offsetXSlider" dojoType="dijit.form.HorizontalSlider" 
                            value="1" minimum="0" maximum="1000" discreteValues="1001" showButtons="false"
                            style="width: 500px;">
            </div>
    </td></tr>
    </table>
    </body>
    </html>

首先我点击了grid.html，它正确地显示了数据，然后点击了带有水平滑块的图表的move.html，图表正常但没有滑块。如果我第一次点击了move.html它很好（也可以获得图表和滑块）

Answer 1

来自DOJO and DIJIT can not parse same ID twice?：

Dojo通过指定的id跟踪它创建的对象/小部件。如果在具有相同id的对象上再次运行解析器，dojo会尝试创建第二个实例，但是已经有一个，所以它应该在js控制台中抛出错误。

在再次解析同一页面之前销毁创建的窗口小部件/对象ID。在这里，我宣布了小部件＆＃39;作为全局变量，所以如果有任何小部件ID，那么在解析之前就会销毁它们。

    if(widgets){
        widgets.forEach(function(widget) {
        widget.destroyRecursive();
    });
    }
    widgets =  dojo.parser.parse();

它对我有用。

Answer 2

您是否检查过您的资源是否正确？我的意思是，如果你打开第二个html页面，你必须再次为这一方加载资源。

更新1

我的猜测是，因为您仍然希望使用第一页中的小部件，为第二页编写新小部件。你不能取消注册它们，因为如果你这样做，你就不能再在第一页中使用它们了。

所以，最简单的方法是为第二页写新的。第一页的值可以转移到第二页。

更新2

上次尝试：

设置html页面

单独编写javascript并在开头加载

<script type="text/javascript" src="...from/here/to/mygauge.js"</script>

此致

Answer 3

enter image description here 我从你的代码中做了一个小提琴，它似乎运作良好。

看看：http://jsfiddle.net/E2J4A/

makeObjects = function () {
  var data = [4, 8, 2, 1, 6,...

此致

在两页中使用了dijit css，但仅在第一页中工作，在第二页中获取空白页

3 个答案:

在两页中使用了dijit css，但仅​​在第一页中工作，在第二页中获取空白页

3 个答案:

在两页中使用了dijit css，但仅在第一页中工作，在第二页中获取空白页