I found a combobox here 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):
TagFilter.master:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="div1" class="GridFilter" runat="server">
<asp:Panel ID="Panel3" CssClass="PanelGridContents" runat="server">
<div id="divTagFilterTable" runat="server">
<asp:table ID="Table2" BorderWidth="0" CellPadding="4" runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:Table ID="tblTagGridFilter" CellPadding="4" runat="server" CellSpacing="0" BackColor="White" CssClass="TagGridFilter" BorderStyle="Solid" BorderWidth="1">
<asp:TableRow ID="tr1" runat="server">
<asp:TableCell CssClass="TagGridFilter2" Wrap="false">
<asp:ImageButton runat="server" ID="ibAdd" OnClick="ibAdd_Click" ImageUrl="~/Images/add.gif" Visible="true"></asp:ImageButton>
<asp:Image runat="server" ID="ImageButton2" ImageUrl="~/Images/noImage.gif" Width="5px" Visible="true"></asp:Image>
<asp:ImageButton runat="server" ID="ibRemove" OnClick="ibRemove_Click" ImageUrl="~/Images/remove.gif" Visible="true"></asp:ImageButton>
</asp:TableCell>
<asp:TableCell BorderWidth="1" CssClass="TagGridFilter2" Wrap="false">
<asp:Button ID="btnGridSwap_1" runat="server" Text="M" OnClick="bntGridSwap_1Click" />
</asp:TableCell>
<asp:TableCell ID="tcDisplayLevel_1" ColumnSpan="3" BorderWidth="1" CssClass="TagGridFilter" Visible="false" Wrap="false">
<asp:DropDownList ID="ddlDisplay1" AutoPostBack="True" OnSelectedIndexChanged="ddlDisplay1Changed" runat="server" />
</asp:TableCell>
<asp:TableCell ID="tcTagLevel1_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
<asp:DropDownList ID="ddlTagLevel1_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel1_1Changed" runat="server" />
</asp:TableCell>
<asp:TableCell ID="tcTagLevel2_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
<asp:DropDownList ID="ddlTagLevel2_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel2_1Changed" runat="server" />
</asp:TableCell>
<asp:TableCell ID="tcTagLevel3_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
<asp:DropDownList ID="ddlTagLevel3_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel3_1Changed" runat="server" />
</asp:TableCell>
<asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
<asp:Label id="lblDevice1" runat="server" />
</asp:TableCell>
<asp:TableCell BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
<asp:DropDownList ID="ddlTagname1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagname_1Changed" runat="server" />
</asp:TableCell>
<asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
<asp:Label id="lblDescription1" runat="server" />
</asp:TableCell>
<asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
<asp:Label id="lblType1" runat="server" />
</asp:TableCell>
<asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
<asp:Label id="lblUOM1" runat="server" />
</asp:TableCell>
<asp:TableCell ID="tcNew1" Visible="false" BorderWidth="1" CssClass="TagGridFilter" Wrap="false" HorizontalAlign="Center">
<asp:ImageButton runat="server" ID="ibNewRecord1" OnClick="ibNewRecord1_Click" ImageUrl="~/Images/new_tiny.gif" Visible="false"></asp:ImageButton>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:TableCell>
</asp:table>
</div>
</asp:Panel>
</div>
</ContentTemplate>
TagSummaryDetail.aspx.cs:
protected new void Page_PreRender(object sender, EventArgs e)
{
base.Page_PreRender(sender, e);
if (GridView_Summary.SelectedIndex < 0 && GridView_Summary.Rows.Count == 0)
ProcessSelection();
string style = @"
<style>
.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; }
</style>";
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "style", style);
string script = @"
<script>
(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 = $(""<span>"")
.addClass(""ui-combobox"")
.insertAfter(select);
input = $(""<input>"")
.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 && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
""(?![^&;]+;)(?!<[^<>]*)("" +
$.ui.autocomplete.escapeRegex(request.term) +
"")(?![^<>]*>)(?![^&;]+;)"", ""gi""
), ""<strong>$1</strong>""),
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 $(""<li></li>"")
.data(""item.autocomplete"", item)
.append(""<a>"" + item.label + ""</a>"")
.appendTo(ul);
};
$(""<a>"")
.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();
});
});
</script>";
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "jQuery", script);
When the page is opened first, than it is a HTTP GET request.
But any other request is HTTP POST request, so you script is not available at this request.
You need to register script to use it in UpdatePanel before request.
More info here:
http://helpondesk.blogspot.cz/2008/11/how-to-register-client-script-inside.html