I found a combobox here现在,当我尝试在我的updatepanel中使用jQuery时,我遇到了一个问题。当我第一次打开页面直到发生部分回发时,组合框效果很好。因此,如果我要更改DropdownList ddlTagLevel3_1,那么下拉列表ddlTagname1不再显示jQuery组合框。有什么想法我需要做什么?这是我的代码,为简单起见省略了一些行(谢谢):
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);
答案 0 :(得分:0)
您需要在从服务器
返回的部分中添加init组合框的代码@if(IsAjax)
{
<script>
$(function() {
// INIT AUTOCOMPLITE
});
</script>
}
根据您的描述,我了解到此代码仅在第一个加载页面上调用一次。但是每次更新html时都需要这样做。
答案 1 :(得分:0)
首先打开页面,而不是HTTP GET请求。
但是任何其他请求都是HTTP POST请求,因此您的脚本在此请求中不可用。
您需要注册脚本以在请求之前在UpdatePanel中使用它。
更多信息: http://helpondesk.blogspot.cz/2008/11/how-to-register-client-script-inside.html
答案 2 :(得分:0)
在页面上添加endRequest
处理程序并再次分配组合框小部件。像这样:
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(updateCombobox);
}
function updateCombobox() {
$('#comobox').combobox();
});