The problem is that get the error:
TypeError: div1.style is undefined
Which leads to the problem that the function isn't called and nothing happens.
JS
<script type="text/javascript">
function siteChange() {
var div1 = board1;
var div2 = board2;
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
</script>
CSS
.FullDiv {
height: 100%;
width: 100%;
}
ASP
<div id="board1" class="FullDiv">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
ASP function call
<a href="Javascript:siteChange()" class="PageNumber">1</a>
<a href="Javascript:siteChange()" class="PageNumber">2</a>
The problem is that get the error:
TypeError: div1.style is undefined
Which leads to the problem that the function isn't called and nothing happens.
JS
<script type="text/javascript">
function siteChange() {
var div1 = board1;
var div2 = board2;
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
</script>
CSS
.FullDiv {
height: 100%;
width: 100%;
}
ASP
<div id="board1" class="FullDiv">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
ASP function call
<a href="Javascript:siteChange()" class="PageNumber">1</a>
<a href="Javascript:siteChange()" class="PageNumber">2</a>
Share
Improve this question
edited Jul 3, 2018 at 12:50
Jesse
3,6426 gold badges27 silver badges42 bronze badges
asked Jul 3, 2018 at 12:05
VearmoxVearmox
751 gold badge1 silver badge6 bronze badges
0
2 Answers
Reset to default 4It can not be able to map your board1
and board2
that's why it is give an error:
function siteChange() {
var div1 = document.getElementById("board1");//change this
var div2 = document.getElementById("board2");//change this
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
Now its work for you.
I guess it should be: var div1 = document.getElementById("board1")
instead of var div1 = board1