Hello, I am seeking assistance with an issue I am facing in my application regarding navigation. The site is divided into different Divs and there is a save/next button that should direct the user to the next Div (screen). The client-side event is handled using JavaScript. However, when clicking the button, the entire application appears on the screen instead of just the specific screen. Can someone provide guidance on how to hide the other Divs so only the current one is visible? My main Div is named divOverview, followed by divContactDetails and several other screens (divs). Any help would be greatly appreciated. Thank you!
<dx:LayoutItem ColSpan="1" ShowCaption="False">
<LayoutItemNestedControlCollection>
<dx:LayoutItemNestedControlContainer runat="server" Width="100%">
<dx:ASPxButton ID="btnSave" runat="server" AutoPostBack="False" Text="Save/Next" Theme="Office2010Blue" OnClick="btnSave_Click">
<ClientSideEvents Click="function(s,e) {javascript:showonlyonev2('divContactDetails');}" />
</dx:ASPxButton>
</dx:LayoutItemNestedControlContainer>
</LayoutItemNestedControlCollection>
</dx:LayoutItem>
The on_click function with the save button is written in VB code behind.
If FocusSet = True Then
ErrDetails.ForeColor = Drawing.Color.Red
ErrDetails.Height = 20 * errCount
' Display the Overview screen initially
If (Not ClientScript.IsStartupScriptRegistered("showonlyonev2")) Then
Page.ClientScript.RegisterStartupScript _
(Me.GetType(), "showonlyonev2", "showonlyonev2('divContactDetails');", True)
End If
If (Not ClientScript.IsStartupScriptRegistered("showonlyonev2")) Then
Page.ClientScript.RegisterStartupScript _
(Me.GetType(), "showonlyonev2", "showonlyonev2('divContactDetails');", True)
End If
Return
End If
Update to the JavaScript code:
<script type="text/javascript">
function showonlyonev2(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes-2') {
if (newboxes[x].id == thechosenone) {
if (newboxes[x].style.display == 'block') {
newboxes[x].style.display = 'none';
}
else {
newboxes[x].style.display = 'block';
}
} else {
newboxes[x].style.display = 'none';
}
}
}
}