当值没有改变时,从jQueryUI Slider刷新UpdatePanel

时间:2014-09-24 15:58:09

标签: asp.net jquery-ui updatepanel

我可能会这样做一轮,但是这里有。我在updatepanel外面有一个滑块,我用它来刷新该面板的内容。我将滑块值传递给隐藏字段,并使用.Net TextChanged事件刷新面板。

所有工作都很好,直到我只是单击手柄而不滑动它所以值是相同的,它仍然会触发滑块“更改”事件,但因为隐藏字段中的值没有改变.Net TextChanged事件没有'火,所以面板的内容消失。

如果没有移动句柄,或者某种方法保持相同的值传递给代码隐藏中的数据函数,那么忽略点击会很好。

赞赏任何想法

戴夫

代码(为清晰起见略微缩短)

<script>
  $(document).ready(function () {
      $("#slider").slider({
          min: 1,
          max: sizes.length - 1,
          value: 2,
          animate: true,              
          create: function (event,ui){
              $("#slider").find(".ui-slider-handle").text("8")
          },
          slide: function (event, ui) {
              var value = $("#slider").slider("option", "value");
              $("#slider").find(".ui-slider-handle").text(sizes[ui.value]);
          },
          change: function (event, ui) {
              var value = $("#slider").slider("option", "value");                  
              $("#slider").find(".ui-slider-handle").text(sizes[ui.value]);
              $("#<%= hid.ClientID %>").val(sizes[ui.value]);
              var UpdatePanel1 = '<%=ajaxGrid.ClientID%>';
              __doPostBack(UpdatePanel1, '');
          },
          stop: function (event, ui) {
          }
      });
  });
</script>

<div id="slider" style="width:400px;"></div>
<asp:UpdatePanel runat="server" ID="ajaxGrid" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="productgrid" class="productgrid" runat="server"></div>

    </ContentTemplate>
</asp:UpdatePanel>
<asp:HiddenField ID="hid" runat="server" OnValueChanged ="portionCount_TextChanged" />

背后的代码

List<product> _products = new List<product>();

protected void Page_Load(object sender, EventArgs e)
{        
    if (!IsPostBack)
    {
        loadJSArray();
        _products = product.getProductsByCatParentAndServings(61, 8);   //  default
    }

    drawGrid();
}

protected void portionCount_TextChanged(object sender, EventArgs e)
{
    _products = product.getProductsByCatParentAndServings(61, int.Parse(hid.Value));
    drawGrid();
}

1 个答案:

答案 0 :(得分:0)

对于Cardboard Programmer来说这是一个例子 - 我一发布它就找到了解决方案。

我设置了一个临时变量,只是传递了最后一个设置值并进行了比较,所以现在jQuery位是这样的:

var sliderWas=0;
      $("#slider").slider({
          min: 1,
          max: sizes.length - 1,
          value: 2,
          animate: true,              
          create: function (event,ui){
              $("#slider").find(".ui-slider-handle").text("8")
          },
          slide: function (event, ui) {
              var value = $("#slider").slider("option", "value");
              $("#slider").find(".ui-slider-handle").text(sizes[ui.value]);
          },
          change: function (event, ui) {                  
              var value = $("#slider").slider("option", "value");                  
              $("#slider").find(".ui-slider-handle").text(sizes[ui.value]);
              $("#<%= hid.ClientID %>").val(sizes[ui.value]);
              if (ui.value != sliderWas) {
                  var UpdatePanel1 = '<%=ajaxGrid.ClientID%>';
                  __doPostBack(UpdatePanel1, '');
              }
              sliderWas = value;
          },
          stop: function (event, ui) {
          }
      });