Как заставить слайдер пользовательского интерфейса jquery поддерживать положение прокрутки при обратной передаче

Question

Итак, я внедряю слайдер Jquery UI на своей странице. Значение ползунка подается в качестве параметра в источник данных sql. При нажатии кнопки параметр подается в источник данных, и сетка на экране перепривязывается. Проблема в том, что я хотел бы, чтобы полоса прокрутки сохраняла свое положение, чтобы пользователи знали, какое значение было введено в качестве параметра для вида сетки, которую они просматривают в настоящее время.

Вот мой код для полосы прокрутки:

 <!--Slider bar for investment-->

 <div style="float:right;">
 <script type = "text/javascript">

     $(function () {
         $("#slider").slider({
             value: 100,
             min: 1,
             max: 200,
             step: 1,
             slide: function (event, ui) {                     
                 $("#hiddenInvestment").val(ui.value);
             }
         });
         $("#hiddenInvestment").val($("#slider").slider("value"));
     });        
    </script>

<div class="demo">
<p>
<asp:label runat="server" id="amountlabel" >Investment:    
</asp:label>    
<input name="hiddenInvestment" id="hiddenInvestment" />
<asp:Label runat="server" ID="percentlabel">%</asp:Label>
</p>
<div id="Div1"></div>
</div>
<div class="demo" style="width:100px;">
<div id="slider"></div>
</div>

Строка, которую, я полагаю, мне нужно изменить, это «значение: 100», но я не уверен, на что мне нужно его изменить. Есть предложения?

Answer 1

У вас может быть скрытое поле на странице. Перед вами submit form для postback установите это скрытое поле со значением slider. При загрузке страницы при инициализации slider прочитайте начальное значение из этого поля hidden. Попробуйте это

$(function () {
     $("#slider").slider({
         value: ($('#sliderVale').val() || 100),
         min: 1,
         max: 200,
         step: 1,
         slide: function (event, ui) {                     
             $("#hiddenInvestment").val(ui.value);
         }
     });
     $("#hiddenInvestment").val($("#slider").slider("value"));
 }); 


 $('form').submit(function(){
     $('#sliderVale').val($("#slider").slider("value"));
 });