Post back causing reset in the slider, how to stop it from doing a reset (asp.net website)

I have a slider and on page load I set a default value to the slider(25,75). Everytime there is a post back inside the update panel after I change the slider value it reset the value to 25,75 how can I stop it from doing an reset.

 <asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />

When I select a option from the drop down the value in the slider is reset. how to stop it

 <script type="text/javascript">
        function pageLoad(sender, args) {
            $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 100,
                    values: [25, 75],
                    slide: function (event, ui) {
                        $("#minval").val("" + ui.values[0] + " - " + ui.values[1]);
                    }
                });
                $("#minval").val("" + $("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));
            });
        }
    </script>

Answers:

Answer

If you want to persist the state of the slider between postbacks, you need to either get the values of the slider into some inputs that actually go back to the server, or move the slider outside of your update panel and move the initialization code out of pageLoad(). For the first approach:

The markup:

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:HiddenField ID="hfSliderHandle1" Value="25" runat="server" />
        <asp:HiddenField ID="hfSliderHandle2" Value="75" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

The script:

var $h1 = $('input[id$="hfSliderHandle1"]'),
    $h2 = $('input[id$="hfSliderHandle2"]');

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [parseInt($h1.val()), parseInt($h2.val())],
    slide: function (event, ui) {
        $("#minval").val(ui.values[0] + " - " + ui.values[1]);
        $h1.val(ui.values[0]);
        $h2.val(ui.values[1]);
    }
});

It's possible you could parse whatever is in #minval to do the same thing, but I know nothing about the nature of that element so I'm just providing the solution as-is for you to adapt the concept as needed. If, for instance, it were a textbox inside your update panel that you pre-populated with the value "25 - 75":

var $minVal = $("#minval");
var h1 = parseInt(/^\d+/.exec($minVal.val())[0]),
    h2 = parseInt(/\d+$/.exec($minVal.val())[0]);

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [h1, h2],
    slide: function (event, ui) {
        $minVal.val(ui.values[0] + " - " + ui.values[1]);
    }
});
Answer

Make sure all your script is outside the UpdatePanel and put what you want called once in .ready() and what you want called on each async postback in pageLoad():

   $(document).ready(function() {
       $(function () {
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 100,
                values: [25, 75],
                slide: function (event, ui) {
                    $("#minval").val("" + ui.values[0] + " - " + ui.values[1]);
                }
            });
            $("#minval").val("" + $("#slider-range").slider("values", 0) +
        " - " + $("#slider-range").slider("values", 1));
        });
   });

   function pageLoad(sender, args) {
        $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });

    }

$(document).ready() and pageLoad() are not the same!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.