Hi All
I have a site for company training. The page has a number of questions, each of which has a RadioButtonList for the user to input their answers. I build all the questions and answers along with any images in an asp:Repeater. On the OnSelectedIndexChanged event of the RadioButtonList I have the following code:
Which in turn uses the following javascript:
If I run the code and start at question 1, the code scrolls perfectly to the next question, until each reaches the end and then stops.
The problem I have is if I say decide to answer for example question 5 without answering questions 1-4 . Instead of it scrolling to question 6 as I would expect, the code leaves the page where it was.
After some experimenting I added an alert in my javascript and found that when the alert is hit the page has actully scrolled to where I want. It is only when I click the OK on the alert it then goes back to where it started i.e. question 5. The parameter being passed from my server side code to the javascript is just same. Debugging I can see no difference at all.
Does anyone know of any reason why the code would scroll down and then revert back?
Thanks, Dave.
I have a site for company training. The page has a number of questions, each of which has a RadioButtonList for the user to input their answers. I build all the questions and answers along with any images in an asp:Repeater. On the OnSelectedIndexChanged event of the RadioButtonList I have the following code:
Code:
<summary>
When the user selects an answer the page scrolls to next question.
</summary>
<param name="sender"></param>
<param name="e"></param>
<remarks></remarks>
Public Sub ScrollToNextQuestion(ByVal sender As Object, ByVal e As System.EventArgs)
Flag to tell code when to scroll to another question.
Dim selectNextItem As Boolean = False
Get the RadioButtonList that has just been pressed.
Dim obj As New Object
obj = sender
Get the client ID of this RadioButtonList.
Dim clientID As String = obj.ClientID
Stores the client ID of the label so it can be used to scroll to when the training get to the last question.
Dim lblQuestionClientID As String = String.Empty
For Each ri As RepeaterItem In rptQuestionnaireQuestions.Items
Find the RadioButtobList in the repeater
Dim rblAnswers As RadioButtonList = CType(ri.FindControl("rblAnswers"), RadioButtonList)
If rblAnswers.ClientID = clientID Then
This is the RadioButtonList the user has just pressed, there set flag so that code will select on the next iteration.
Dim lblQuestion As Label = CType(ri.FindControl("lblQuestion"), Label)
Make reference to this for the event of this being the last question.
lblQuestionClientID = lblQuestion.ClientID
selectNextItem = True
Else
If selectNextItem Then
This is the control to focus to, so scroll to it.
Try
Reference the control in the repeater that we are going to scroll down to.
Dim lblQuestion As Label = CType(ri.FindControl("lblQuestion"), Label)
Render javascript to scroll to next question.
ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "click", "ScrollToNextQuestion(" + lblQuestion.ClientID + ");", True)
Finally
Reset flag.
selectNextItem = False
End Try
End If
End If
Next
If selectNextItem Then
Try
This is the last question we dont want the page to scroll back to the start.
ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "click", "ScrollToNextQuestion(" + lblQuestionClientID + ");", True)
Finally
Reset flag.
selectNextItem = False
End Try
End If
End Sub
Which in turn uses the following javascript:
C#:
function ScrollToNextQuestion(id)
{
var el = document.getElementById(id)
if (el != null)
{
el.scrollIntoView(true);
el.focus();
}
}
The problem I have is if I say decide to answer for example question 5 without answering questions 1-4 . Instead of it scrolling to question 6 as I would expect, the code leaves the page where it was.
After some experimenting I added an alert in my javascript and found that when the alert is hit the page has actully scrolled to where I want. It is only when I click the OK on the alert it then goes back to where it started i.e. question 5. The parameter being passed from my server side code to the javascript is just same. Debugging I can see no difference at all.
Does anyone know of any reason why the code would scroll down and then revert back?
Thanks, Dave.