2014-02-12 2 views
0

Я использовал dijit css для dijit/horizontalSlider на двух страницах, ползунок загружается на первую страницу, но на второй странице становится пустым. dojoz/data/DataGrid также правильно загружен на первой странице, но на второй странице становится пустым.Используется dijit css на двух страницах, но работает только на первой странице, на второй странице становится пустой.

ОБНОВЛЕНО:

У меня есть две кнопки в home.html (родительской страницы) и вызова шаблонов Джанго 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 и отображаются данные правильно, после чего нажал на ходу. html для диаграммы с горизонтальными ползунками, график пришел правильно, но ползунков нет. Если я щелкнул move.html в первый раз, это wokring fine (получение диаграммы и ползунков тоже)

+0

Предоставить сообщение об ошибке, некоторый исходный код и т. Д. – GuyT

+0

В первый раз загружаются все статические файлы (css/js/gif), но файлы второго раза не загружаются. Пожалуйста, проверьте эту ссылку для дополнительной информации «http://stackoverflow.com/questions/21432605/dijit-form-horizontalslider-is-getting-loaded-for-first-time-only» – Bangarraju

+0

Добавлен исходный код в вопрос! – Bangarraju

ответ

1

От DOJO and DIJIT can not parse same ID twice?:

Dojo отслеживающий объектов/виджетов, которые она создает указанным идентификатором. Если вы снова запустите парсер на объекте с тем же идентификатором, dojo попытается создать второй экземпляр, но его уже есть, поэтому он должен выдать ошибку в вашей консоли js.

Уничтожьте созданные виджеты/объекты перед повторным анализом одной и той же страницы. Здесь я объявляю «widgets» как глобальную переменную, так что если все идентификаторы виджетов просто уничтожают их до разбора.

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

Это сработало для меня.

0

Вы проверили, верны ли ваши ресурсы? Я имею в виду, что если вы откроете вторую html-страницу, вы должны снова загрузить ресурсы для этой стороны.

UPDATE 1

Мое предположение было бы, потому что вы все еще хотите использовать виджеты с первой страницы, чтобы написать новые для второй страницы. Вы не можете их отменить, потому что если вы это сделаете, вы не сможете использовать их на первой странице.

Итак, самый простой способ - написать новые для второй страницы. Значения с первой страницы можно перенести на вторую.

Update 2

Последняя попытка:

  1. Настройка HTML страницы

  2. Написать Javascript seperatly и загрузить его в начале, как

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

С уважением

+0

Поддержание кнопок навигации, я загружаю одинаковые файлы css/js на обе страницы. предположим, что если я нажму на вторую кнопку в первый раз, она работает нормально, но первая страница не загружается, и если я нажму на первую кнопку в первый раз, она работает нормально, но вторая страница не загружается (двойной щелчок также не работает). используя JQuery для обработки событий. – Bangarraju

+0

Пожалуйста, уточните это для дополнительной информации http://stackoverflow.com/questions/21432605/dijit-form-horizontalslider-is-getting-loaded-for-first-time-only – Bangarraju

+0

Итак, когда вы меня поняли, вы используете тот же виджет, который вы загружаете один раз во второй раз? Возможно, ошибка возникает, потому что виджеты все еще зарегистрированы. Есть ли ошибки в вашем console.log? – MiBrock

0

enter image description here Я делаю скрипку из вашего кода и, похоже, работает хорошо.

Посмотрите: http://jsfiddle.net/E2J4A/

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

С уважением

+0

Я включил ваш образец кода в свой проект и добавил снимок экрана результата, проблема такая же. – Bangarraju

+0

все еще я столкнулся с той же проблемой, любой может помочь! – Bangarraju

+0

Извините, закончились идеи. Вы пытались настроить датчик в отдельном js-файле и загрузить его с самого начала? Затем вы можете заявить, что загружен весь необходимый код - включите все определения, которые вы сделали. – MiBrock