Toggle DIVs without reloading page

Question

Pie1 displays by default. Clicking the drop down for Pie2 or Pie3 leaves the DIV blank, selecting Pie1 once again returns echarts_Pie1. MY dropdown for pie2 and pie3 is not working.

<script language="javascript">
    ivan = {};
    ivan.showhide = function(val1)
    {
      if(val1 == 1)
      {     
        document.getElementById('echart_pie1').style.display = "";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 2)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 3)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "";
      }

    }      
    </script>

Pie1 displays by default. Clicking the drop down for Pie2 or Pie3 leaves the DIV blank, selecting Pie1 once again returns echarts_Pie1. MY dropdown for pie2 and pie3 is not working.

<div class="col-md-3 col-sm-4 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Storage</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                         <option onclick="ivan.showhide(1)">Pie1</option>
                         <option onclick="ivan.showhide(2)">Pie2</option>
                          <option onclick="ivan.showhide(3)">Pie3</option>
                          </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div id="echart_pie1" style="height:180px;"></div>
                        <div id="echart_pie2" style="height:180px; display:none;"></div>
                        <div id="echart_pie3" style="height:180px; display:none;"></div>                           

                  </div>

What content do you have in `echart_pie2`? The HTML you have given does not have any, so I assume you have script that provides content for it. Could you add that script to the question or explain how else that element gets its content? — trincot, Jul 03 '16 at 12:58
Note that an `option` element is not allowed to occur as child of an `ul` element. Permitted parents are [`optgroup`, `select`, or `datalist`](https://www.w3.org/TR/html-markup/option.html#option-context). — trincot, Jul 03 '16 at 13:02
It must be the way that i am rendering the graphs that needs to regenerate, — Ivan Nel, Jul 04 '16 at 10:10
@trincot when the page loads, i am using display:none on the divs, i think it needs to regenerate the graphs to display. I probably have to take hidden out, but then the divs stack underneath each other. the default graph loads, but when i select the others - the div is blank. ill need a function that loads all 3 graphs, and then sets 2 to hidden. Just not sure if thats the right way, or tbh - how to do that. — Ivan Nel, Jul 04 '16 at 12:01
@trincot your previous Q - im generating the graphs inside the script, var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme); echartPie1.setOption({ — Ivan Nel, Jul 04 '16 at 12:03
Ah, I think that info is crucial to the question. Could you edit your question and add it? — trincot, Jul 04 '16 at 12:08

score 0 · Answer 1 · answered Jul 03 '16 at 13:38

Is this the result, you was searching for?

HTML:

<ul role="menu">
                     <option onclick="ivan.showhide(1)">Pie1</option>
                     <option onclick="ivan.showhide(2)">Pie2</option>
                      <option onclick="ivan.showhide(3)">Pie3</option>
                      </ul>
                        <div id="echart_pie1" style="height:180px;">a</div>
                    <div id="echart_pie2" style="height:180px; display:none;">b</div>
                    <div id="echart_pie3" style="height:180px; display:none;">c</div>

JS:

ivan = {};
ivan.showhide = function(val1)
{
  if(val1 == 1)
  {     
    document.getElementById('echart_pie1').style.display = "";
    document.getElementById('echart_pie2').style.display = "none";
    document.getElementById('echart_pie3').style.display = "none";
  }
  else if (val1 == 2)
  {     
    document.getElementById('echart_pie1').style.display = "none";
    document.getElementById('echart_pie2').style.display = "";
    document.getElementById('echart_pie3').style.display = "none";
  }
  else if (val1 == 3)
  {     
    document.getElementById('echart_pie1').style.display = "none";
    document.getElementById('echart_pie2').style.display = "none";
    document.getElementById('echart_pie3').style.display = "";
  }

}

Actually i didnt even change something, except the contents in your DIV's ( i used a, b and c). This works if it it the result that you expected.

No that does not work, i still see Pie1 by default - selecting pie2 or pie3 makes my div blank. Selecting pie1 again after changes back to pie1. seems pie2 and pie3 dont generate because of display:none — Ivan Nel, Jul 04 '16 at 12:04

score 0 · Answer 2 · answered Jul 04 '16 at 12:34

The echarts library might need the containers to be visible during the generation of the graphics, so I would suggest to remove the display:none style from the HTML:

<ul role="menu">
  <option onclick="ivan.showhide(1)">Pie1</option>
  <option onclick="ivan.showhide(2)">Pie2</option>
  <option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px;"></div>
<div id="echart_pie3" style="height:180px;"></div>

In the JavaScript code you have code to initialise the graphics, with calls like these:

var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme); 
// ... etc

Right after that code, add this line:

ivan.showhide(1);

This assumes of course that you have already defined ivan at this point. If not, put that definition first, and then add the above line below it.

A simplification

Not related to the problem, but note that you can simplify the showhide function to this:

ivan = {};
ivan.showhide = function(val1)
{
    document.getElementById('echart_pie1').style.display = val1 !== 1 ? "none" : "";
    document.getElementById('echart_pie2').style.display = val1 !== 2 ? "none" : "";
    document.getElementById('echart_pie3').style.display = val1 !== 3 ? "none" : "";
}

If all three graphs flash at page load

Maybe the page will for a fraction of a second show all three graphs when the page loads. If that is a problem, try this, although it might bring back the original problem:

Add the style visibility: hidden to the ul tag:

<ul role="menu" style="visibility: hidden">

Remove that style once you have called showhide(1):

 ivan.showhide(1);
 document.querySelector('ul[role=menu]').style.visibility = 'visible';

score 0 · Answer 3 · answered Jul 05 '16 at 05:05

It doesn't really matter if the <div> is visible when init with ECharts. What matters is that it should have width and height as a container.

So, you could set them with all three charts when page loaded, no matter which one is visible.

document.getElementById('echart_pie1').style.width = '800px';
document.getElementById('echart_pie1').style.height = '600px';

document.getElementById('echart_pie2').style.width = '800px';
document.getElementById('echart_pie2').style.height = '600px';

document.getElementById('echart_pie3').style.width = '800px';
document.getElementById('echart_pie3').style.height = '600px';

score 0 · Answer 4 · answered Jul 05 '16 at 05:17

onclick function is not work in option element ! So try to change your option format a little bit

<select class="dropdown-menu" role="menu" onchange="ivan.showhide(this.value)">
              <option value="1">Pie1</option>
              <option value="2">Pie2</option>
              <option value="3">Pie3</option>
</select>

score 0 · Answer 5 · answered Jul 07 '16 at 10:39

Thank you everyone for assisting. Its working now - I tested it using pie1a, pie1b, pie1c.

<script type="text/javascript">
    function doLoadStuff()
    {
        document.getElementById('echart_pie1b').style.display = "none";
        document.getElementById('echart_pie1c').style.display = "none";
    }
</script>

HTML

<body class="nav-md" onload="doLoadStuff()">

...

<ul class="dropdown-menu" role="menu">
    <option onclick="showhidePie1('a')">Pie1a</option>
    <option onclick="showhidePie1('b')">Pie1b</option>
    <option onclick="showhidePie1('c')">Pie1c</option>
</ul>


<div id="echart_pie1a" style="height:200px;"></div>
<div id="echart_pie1b" style="height:200px;"></div>
<div id="echart_pie1c" style="height:200px;"></div>

I then initialized my 3 pies inside the bottom script

var echartBar1a = echarts.init(document.getElementById('echart_bar1a'), theme);

    echartBar1a.setOption(
                         {
                           Options...
                         }

And then used a function to set the style.

function showhidePie1(theChar) {
    document.getElementById('echart_pie1a').style.display = "none";
    document.getElementById('echart_pie1b').style.display = "none";
    document.getElementById('echart_pie1c').style.display = "none";

    document.getElementById('echart_pie1'+theChar).style.display = "";      
}

Its now working perfectly. Thank you.

Toggle DIVs without reloading page

5 Answers5

A simplification

If all three graphs flash at page load