locked
Problem resetting slider values RRS feed

  • Question

  • User-94285869 posted

    Hi,

    I have several slider values contained in an accordion panel.  I have a button, btnResetSliders, that I use to reset all the values of the sliders to zero (0).  I've tried all kinds but it just isn't working.  The button html tag is as follows:

    <asp:Button ID="btnReset" runat="server" Text="Reset Sliders" Width="150px" OnClick="btnReset_Click"/>

    The sliders are inside <ul><li> tags.  See sample snippet below:

    <ul>
      <li><h4>Cropland</h4></li>
        <div id="sliderDiv" >
          <asp:Label ID="CroplandSlider_BoundControl" runat="server" AssociatedControlID="CroplandSlider" />
          <asp:TextBox ID="CroplandSlider" runat="server" AutoPostBack="True" Text="0" BorderStyle="None"
              OnTextChanged="CroplandSlider_TextChanged" ClientIDMode="Static" />
          <ajaxToolkit:SliderExtender ID="CroplandSliderExtender" runat="server"
                Enabled="true"
                BehaviorID="CroplandSlider"
                TargetControlID="CroplandSlider"
                Minimum="-100"
                Maximum="100"
                BoundControlID="CroplandSlider_BoundControl"
                RailCssClass="croplandrail"
                HandleCssClass="croplandhandle"
                HandleImageUrl="~/images/sliders/cropland_handle.png"
                EnableHandleAnimation="true">
          </ajaxToolkit:SliderExtender>
        </div>
      </li>
    </ul>

    ..and so on.  The sliders are in Default.aspx web page.  I'm using a Master page.  I placed the javascript at the bottom of the Default.aspx page, just before the </asp:Content> tag .  The javascript is as follows:

    <script type="text/javascript">
      function resetValue() {
        document.getElementById("CroplandSlider").value = 0;
       ... all other sliders here....
      }
    </script>

    The code behind:

    protected void btnReset_Click(object sender, EventArgs e)
    {
      If (Page.IsPostBack)
      {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "JSScript", "resetValue();", true);
      }
    }

    It has no effect whatsoever on the values or location of the slider handles.

    Appreciate any help.


       

    Wednesday, May 6, 2015 10:00 AM

Answers

  • User-94285869 posted

    Hi,

    Resolved this issue.  I re-wrote the JavaScript as follows:

    <script type="type/javascript">
      function resetValue() {
        $find('CroplandSlider'>.set_Value(0);
       .... other sliders here...
      }
    </script>

    This works for me.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 11, 2015 9:37 AM

All replies

  • User1210767569 posted

    Is your code inside a <Form> tag, if not try adding that around first. 

    Wednesday, May 6, 2015 10:10 AM
  • User-94285869 posted

    Yes.  It is.  The form tag is set in the Master page.  So contents of all web page using the Master page are inside the <form> tag.

    Wednesday, May 6, 2015 10:17 AM
  • User61956409 posted

    Hi mgambone,

    Thanks for your post.

    <asp:TextBox ID="CroplandSlider" runat="server" AutoPostBack="True" Text="0" BorderStyle="None"
              OnTextChanged="CroplandSlider_TextChanged" ClientIDMode="Static" />

    Please reset the value of TextBox “CroplandSlider” in the javascript function. This sample is for your reference.

    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            <ul>
                <li>
                    <h4>Cropland</h4>
                </li>
                <li>
                    <div id="sliderDiv">
                        <asp:Label ID="CroplandSlider_BoundControl" runat="server" AssociatedControlID="CroplandSlider" />
                        <asp:TextBox ID="CroplandSlider" runat="server" AutoPostBack="True" Text="0" BorderStyle="None"
                            OnTextChanged="CroplandSlider_TextChanged" ClientIDMode="Static" />
                        <asp:SliderExtender
                            ID="CroplandSliderExtender" runat="server"
                            Enabled="true"
                            BehaviorID="CroplandSlider"
                            TargetControlID="CroplandSlider"
                            Minimum="-100"
                            Maximum="100"
                            EnableHandleAnimation="true">
                        </asp:SliderExtender>
                    </div>
                </li>
            </ul>
            <br />
            <asp:Button ID="btnReset" runat="server" Text="Reset Sliders" OnClientClick="resetValue();" />
        </div>
    </form> 
    
    <script>
        function resetValue() {
            document.getElementById("CroplandSlider").value = "0";
        }
    </script> 
    

    Best Regards,

    Fei Han



    Wednesday, May 6, 2015 10:39 PM
  • User-94285869 posted

    Hi,

    I tried changing the Button's OnClientClick="resetValue();" but I get an error:

    "Unable to set property 'value' of undefined or null reference"

    Thanks for the reply.

    Friday, May 8, 2015 3:09 PM
  • User-94285869 posted

    Hi,

    Also, I'm using AjaxControlToolkit 15 (installed using DevExpress download).  So I'm not using ToolkitScriptManager; I'm using ScriptManager as below:

    <asp:ScriptManager ID=ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>

    Friday, May 8, 2015 4:40 PM
  • User-94285869 posted

    Hi,

    Resolved this issue.  I re-wrote the JavaScript as follows:

    <script type="type/javascript">
      function resetValue() {
        $find('CroplandSlider'>.set_Value(0);
       .... other sliders here...
      }
    </script>

    This works for me.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 11, 2015 9:37 AM