Refreshing UpdatePanel from jQueryUI Slider when value doesn't change

Question

it's possible I'm doing this a round about way, but here goes. I have a slider outside an updatepanel which I'm using to refresh the contents of that panel. I'm passing the slider value to a hidden field and using the .Net TextChanged event to refresh the panel.

All works great until I just click the handle without sliding it so the value is the same, which still fires the slider "change" event but because the value in the hidden field hasn't changed the .Net TextChanged event doesn't fire, so the contents of the panel disappear.

It would be good if there is a way to ignore the click if the handle isn't moved, or some way of keeping the same value to pass to the data function in codebehind.

Any ideas appreciated

Dave

Code (shortened slightly for clarity)

<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" />

Code Behind

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();
}

Answer 1

This turned out to be a case for the Cardboard Programmer - as soon as I'd posted it I figured out a solution.

I set a temporary variable and just passed the last set value around and compared it, so the jQuery bit is like this now:

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) {
          }
      });