Dijit form horizontalSlider is getting loaded for

问题:

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.

First time the CSS is

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

and for the second time it's like,

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

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

回答1:

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.

for more details, refer the link below

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