title: jQuery combobox and ASP.NET updatepanel
body: <p><a href="http://jqueryui.com/demos/autocomplete/#combobox" rel="nofollow">I found a combobox here</a> and now I'm facing a problem when I try using the jQuery with my updatepanel. The combobox works great when I first open the page until a partial postback happens.  So if I was to change the DropdownList ddlTagLevel3_1, for example, then the dropdown ddlTagname1 doesn't show the jQuery combobox anymore.  Any ideas what I need to do?  Here is my code with some lines ommitted for simplicity (thanks):</p>
  
  <p>TagFilter.master:</p>
  
  <pre><code>&lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"&gt;
  &lt;ContentTemplate&gt;
          &lt;div id="div1" class="GridFilter" runat="server"&gt;
                  &lt;asp:Panel ID="Panel3" CssClass="PanelGridContents" runat="server"&gt;
              &lt;div id="divTagFilterTable" runat="server"&gt;
                  &lt;asp:table ID="Table2" BorderWidth="0" CellPadding="4" runat="server"&gt;
                      &lt;asp:TableRow&gt;
                          &lt;asp:TableCell&gt;
                          &lt;asp:Table ID="tblTagGridFilter" CellPadding="4" runat="server" CellSpacing="0" BackColor="White" CssClass="TagGridFilter" BorderStyle="Solid" BorderWidth="1"&gt;
                                                          &lt;asp:TableRow ID="tr1" runat="server"&gt;
                                                              &lt;asp:TableCell CssClass="TagGridFilter2" Wrap="false"&gt;
                                                                  &lt;asp:ImageButton runat="server" ID="ibAdd" OnClick="ibAdd_Click" ImageUrl="~/Images/add.gif" Visible="true"&gt;&lt;/asp:ImageButton&gt;
                                                                  &lt;asp:Image runat="server" ID="ImageButton2" ImageUrl="~/Images/noImage.gif" Width="5px" Visible="true"&gt;&lt;/asp:Image&gt;
                                                                  &lt;asp:ImageButton runat="server" ID="ibRemove" OnClick="ibRemove_Click" ImageUrl="~/Images/remove.gif" Visible="true"&gt;&lt;/asp:ImageButton&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell BorderWidth="1" CssClass="TagGridFilter2" Wrap="false"&gt;
                                                                  &lt;asp:Button ID="btnGridSwap_1" runat="server" Text="M" OnClick="bntGridSwap_1Click" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell ID="tcDisplayLevel_1" ColumnSpan="3" BorderWidth="1" CssClass="TagGridFilter" Visible="false" Wrap="false"&gt;
                                                                  &lt;asp:DropDownList ID="ddlDisplay1" AutoPostBack="True" OnSelectedIndexChanged="ddlDisplay1Changed" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell ID="tcTagLevel1_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false"&gt;
                                                                  &lt;asp:DropDownList ID="ddlTagLevel1_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel1_1Changed" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell ID="tcTagLevel2_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false"&gt;
                                                                  &lt;asp:DropDownList ID="ddlTagLevel2_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel2_1Changed" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell ID="tcTagLevel3_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false"&gt;
                                                                  &lt;asp:DropDownList ID="ddlTagLevel3_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel3_1Changed" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false"&gt;
                                                                  &lt;asp:Label id="lblDevice1" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell BorderWidth="1" CssClass="TagGridFilter" Wrap="false"&gt;
                                                                  &lt;asp:DropDownList ID="ddlTagname1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagname_1Changed" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false"&gt;
                                                                  &lt;asp:Label id="lblDescription1" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false"&gt;
                                                                  &lt;asp:Label id="lblType1" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false"&gt;
                                                                  &lt;asp:Label id="lblUOM1" runat="server" /&gt;
                                                              &lt;/asp:TableCell&gt;
                                                              &lt;asp:TableCell ID="tcNew1" Visible="false" BorderWidth="1" CssClass="TagGridFilter" Wrap="false" HorizontalAlign="Center"&gt;
                                                                  &lt;asp:ImageButton runat="server" ID="ibNewRecord1" OnClick="ibNewRecord1_Click" ImageUrl="~/Images/new_tiny.gif" Visible="false"&gt;&lt;/asp:ImageButton&gt;
                                                              &lt;/asp:TableCell&gt;
                                      &lt;/asp:TableRow&gt;
                      &lt;/asp:Table&gt;
                      &lt;/asp:TableCell&gt;
                                  &lt;/asp:table&gt;
                          &lt;/div&gt;
                  &lt;/asp:Panel&gt;
          &lt;/div&gt;
  &lt;/ContentTemplate&gt;
  </code></pre>
  
  <p></p>
  
  <p>TagSummaryDetail.aspx.cs:</p>
  
  <pre><code>    protected new void Page_PreRender(object sender, EventArgs e)
  {
      base.Page_PreRender(sender, e);
  
      if (GridView_Summary.SelectedIndex &lt; 0 &amp;&amp; GridView_Summary.Rows.Count == 0)
          ProcessSelection();
  
      string style = @"
          &lt;style&gt;
              .ui-combobox {
                  position: relative;
                  display: inline-block;
                  background: #ffffff;
              }
              .ui-combobox-toggle {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  margin-left: -1px;
                  padding: 0;
                  background: #ffffff
                  /* adjust styles for IE 6/7 */
                  *height: 1.7em;
                  *top: 0.1em;
              }
              .ui-combobox-input {
                  margin: 0;
                  padding: 0.2em;
                  background: #ffffff;
                  width: 20em;
              }
              .ui-button-icon-only .ui-button-text { background: #e6e6e6; } 
          &lt;/style&gt;";
      this.Page.ClientScript.RegisterStartupScript(this.GetType(), "style", style);
  
      string script = @"
              &lt;script&gt;
                  (function ($) {
                      $.widget(""ui.combobox"", {
                          _create: function () {
                              var input,
                          self = this,
                          select = this.element.hide(),
                          selected = select.children("":selected""),
                          value = selected.val() ? selected.text() : """",
                          wrapper = this.wrapper = $(""&lt;span&gt;"")
                              .addClass(""ui-combobox"")
                              .insertAfter(select);
  
                              input = $(""&lt;input&gt;"")
                          .appendTo(wrapper)
                          .val(value)
                          .addClass(""ui-state-default ui-combobox-input"")
                          .autocomplete({
                              delay: 0,
                              minLength: 0,
                              source: function (request, response) {
                                  var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), ""i"");
                                  response(select.children(""option"").map(function () {
                                      var text = $(this).text();
                                      if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                                          return {
                                              label: text.replace(
                                                  new RegExp(
                                                      ""(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)("" +
                                                      $.ui.autocomplete.escapeRegex(request.term) +
                                                      "")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)"", ""gi""
                                                  ), ""&lt;strong&gt;$1&lt;/strong&gt;""),
                                              value: text,
                                              option: this
                                          };
                                  }));
                              },
                              select: function (event, ui) {
                                  ui.item.option.selected = true;
                                  self._trigger(""selected"", event, {
                                      item: ui.item.option
                                  });
                              },
                              change: function (event, ui) {
                                  if (!ui.item) {
                                      var matcher = new RegExp(""^"" + $.ui.autocomplete.escapeRegex($(this).val()) + ""$"", ""i""),
                                          valid = false;
                                      select.children(""option"").each(function () {
                                          if ($(this).text().match(matcher)) {
                                              this.selected = valid = true;
                                              return false;
                                          }
                                      });
                                      if (!valid) {
                                          // remove invalid value, as it didn't match anything
                                          $(this).val("""");
                                          select.val("""");
                                          input.data(""autocomplete"").term = """";
                                          return false;
                                      }
                                  }
                              }
                          })
                          .addClass(""ui-widget ui-widget-content ui-corner-left"");
  
                              input.data(""autocomplete"")._renderItem = function (ul, item) {
                                  return $(""&lt;li&gt;&lt;/li&gt;"")
                              .data(""item.autocomplete"", item)
                              .append(""&lt;a&gt;"" + item.label + ""&lt;/a&gt;"")
                              .appendTo(ul);
                              };
  
                              $(""&lt;a&gt;"")
                          .attr(""tabIndex"", -1)
                          .attr(""title"", ""Show All Items"")
                          .appendTo(wrapper)
                          .button({
                              icons: {
                                  primary: ""ui-icon-triangle-1-s""
                              },
                              text: false
                          })
                          .removeClass(""ui-corner-all"")
                          .addClass(""ui-corner-right ui-combobox-toggle"")
                          .click(function () {
                              // close if already visible
                              if (input.autocomplete(""widget"").is("":visible"")) {
                                  input.autocomplete(""close"");
                                  return;
                              }
  
                              // work around a bug (likely same cause as #5265)
                              $(this).blur();
  
                              // pass empty string as value to search for, displaying all results
                              input.autocomplete(""search"", """");
                              input.focus();
                          });
                          },
  
                          destroy: function () {
                              this.wrapper.remove();
                              this.element.show();
                              $.Widget.prototype.destroy.call(this);
                          }
                      });
                  })(jQuery);
  
                  $(function () {
                      $(""#" + Master.Tagname1.ClientID + @""").combobox();  //Tagname1 is ddlTagname1
                      $(""#toggle"").click(function () {
                          $(""#" + Master.Tagname1.ClientID + @""").toggle();
                      });
                  });
              &lt;/script&gt;";
  
      this.Page.ClientScript.RegisterStartupScript(this.GetType(), "jQuery", script);
  </code></pre>