Dijit表格horizo​​ntalSlider仅是第一次加载吗? [英] Dijit form horizontalSlider is getting loaded for first time only?

问题描述

我正在使用dojo脚本来创建图表，用于缩放和平移，我使用了dijit滑块.第一次正确加载了滑块，但第二次(从另一页返回后)图表已加载，但这些滑块除外.使用Jquery进行事件处理.刷新页面后，它可以正常工作.

I am using dojo scripts for creating charts, for zooming and panning I have used dijit slider. First time sliders are getting loaded correctly but second time( after coming back form another page) chart is getting loaded except these Sliders. Using Jquery for event handling. After refreshing page it's working fine.

第一次使用CSS

<table>
  <tbody>
        <tr>
        <td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span></td></tr>
        <tr>
        <td>
          <table widgetid="scaleXSlider" id="scaleXSlider" style="width: 450px;" class="dijit dijitReset dijitSlider dijitSliderH" rules="none" data-dojo-attach-event="onkeydown:_onKeyDown, onkeyup:_onKeyUp" role="presentation" border="0" cellpadding="0" cellspacing="0" lang="en">
            <tbody>
              <tr class="dijitReset"><td class="dijitReset" colspan="2">
                <td data-dojo-attach-point="topDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH"></td>
                <td class="dijitReset" colspan="2"></td>
              </tr>

              <tr class="dijitReset">
                 <td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
                    <div class="dijitSliderDecrementIconH" style="display:none" data-dojo-attach-point="decrementButton">
                       <span class="dijitSliderButtonInner">-</span>
                    </div>
                 </td>
                 <td class="dijitReset">
                    <div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper" data-dojo-attach-event="press:_onClkDecBumper"></div>
                 </td>
                 <td class="dijitReset">
                    <input value="1" data-dojo-attach-point="valueNode" type="hidden">
                        <div class="dijitReset dijitSliderBarContainerH" role="presentation" data-dojo-attach-point="sliderBarContainer">
                          <div style="width: 0%;" role="presentation" data-dojo-attach-point="progressBar" class="dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH" data-dojo-attach-event="press:_onBarClick">
                            <div class="dijitSliderMoveable dijitSliderMoveableH">
                              <div aria-valuenow="1" tabindex="0" aria-valuemax="5" aria-valuemin="1" data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider"></div>
                            </div>
                          </div>
                          <div style="width: 100%;" role="presentation" data-dojo-attach-point="remainingBar" class="dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH" data-dojo-attach-event="press:_onBarClick">
                          </div>
                        </div>
                 </td>
                 <td class="dijitReset">
                   <div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper" data-dojo-attach-event="press:_onClkIncBumper"></div>
                  </td>
                  <td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
                    <div class="dijitSliderIncrementIconH" style="display:none" data-dojo-attach-point="incrementButton">
                      <span class="dijitSliderButtonInner">+</span>
                    </div>
                  </td>
                </tr>
                <tr class="dijitReset">
                  <td class="dijitReset" colspan="2"></td>
                  <td data-dojo-attach-point="containerNode,bottomDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH">
                  </td>
                  <td class="dijitReset" colspan="2"></td>
                </tr>
              </tbody>
             </table>

第二次，

<table>
    <tbody><tr><td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
    <tr><td>
            <div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" value="1" minimum="1" maximum="5" discretevalues="6" showbuttons="false" style="width: 450px;">
            </div>
    </td></tr></table>

所有css类都没有第二次加载.请您帮我:(.

All the css classes are not getting loaded for the second time.Could you please help me :(.

推荐答案

Dojo跟踪由指定ID创建的对象/小部件.如果您在具有相同ID的对象上再次运行解析器，dojo会尝试创建第二个实例，但是已经存在一个实例，因此它应该在js控制台中引发错误.

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.

销毁创建的小部件/对象ID，然后再次解析同一页面.在这里，我已将小部件"声明为全局变量，因此，如果有任何小部件ID，只需在解析之前销毁它们即可.

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();

对我有用.

有关更多详细信息，请参见下面的链接

for more details, refer the link below

查看全文