Used dijit css in two pages, but working in first page only, in second page getting blank page

StackOverflow https://stackoverflow.com/questions/21721041

Question

I have used dijit css for dijit/horizontalSlider in two pages , slider is getting loaded in first page but in second page getting blank. dojoz/data/DataGrid also loaded correctly in first page, but in second page getting blank.

UPDATED:

I have two buttons in home.html(parent page) and calling django templates grid.html and move.html. Here is grid.html source code

    <!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>

Here is the 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>

First I have clicked on grid.html and it displayed the data correctly, after that clicked on move.html for chart with horizontal sliders, chart came properly but no sliders are there. If I clicked move.html first time it is wokring fine(getting chart and sliders also)

Was it helpful?

Solution

From DOJO and DIJIT can not parse same ID twice?:

Dojo keeps track of the objects / widgets it creates by the specified id. If you run the parser again on an object with the same id, dojo tries to create a second instance, but there is already one, so it should throw an error in your js console.

Destroy the created widget/object ids before you parse the same page again. Here I have declared 'widgets' as global variable, so that if any widgets ids are there just destroying them before parsing. 

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

It's worked for me.

OTHER TIPS

enter image description hereI make a fiddle out of your Code and it seems to be working well.

Have a look: http://jsfiddle.net/E2J4A/

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

Regards

Have you checked if your resources are correct? I mean, if you open a second html-page you must load the resources for this side again.

UPDATE 1

My guess would be, because you still want to use the widgets from the first Page, to write new ones for the second Page. You can't unregister them, because if you do, you can't use them anymore in the first Page.

So, the easiest Way is to write new ones for the second Page. The values from the first Page, can be transfered to the second.

Update 2

Last try :

  1. Setup html pages

  2. Write javascript seperatly and load it at the start like 

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

Regards

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top