The following snippet demonstrates a slider extender and link button I have that I want to work together:
<asp:ScriptManager ID="smTestSlider" runat="server"></asp:ScriptManager>
<script type="text/javascript">
var totalNumChapters = 100;
function navNextChapter() {
var txtChapter = document.getElementById("<%=txtChapter.ClientID%>");
var chKey = parseInt(txtChapter.value);
if (chKey < totalNumChapters) {
txtChapter.value = (chKey + 1).toString();
}
return false;
}
</script>
<asp:TextBox ID="txtChapter" runat="server" />
<ajaxToolkit:SliderExtender ID="seChapter" runat="server" EnableHandleAnimation="true" Length="280" Maximum="100" Minimum="1" RaiseChangeOnlyOnMouseUp="false" TargetControlID="txtChapter" />
<asp:LinkButton ID="lnkNextChapter" runat="server">
<asp:Image ID="imgNextChapter" runat="server" AlternateText="Next chapter" ToolTip="Next chapter" />
</asp:LinkButton>
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim CurrScriptMgr As ScriptManager = ScriptManager.GetCurrent(Me.Page)
CurrScriptMgr.RegisterAsyncPostBackControl(txtChapter)
lnkNextChapter.Attributes.Add("onclick", "return navNextChapter();")
txtChapter.Text = "1"
End Sub
It's working as I wish except that the position of the slider is not updated or changed when I click on the link button. The value of txtChapter is changed properly by the JavaScript function, but the slider remains unchanged. How do I update the position of the slider when the text value changes? I thought it should happen automatically.