jQuery的组合框回发后失去造型 [英] jQuery ComboBox losing styling after postback
本文介绍了jQuery的组合框回发后失去造型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是一个跟进这个问题：
<一href=\"http://stackoverflow.com/questions/6860415/dropdownlist-to-combobox/6860517#6860517\">dropdownlist以组合框
我在页面加载后正在转换为jQuery的组合框下拉列表。我已经修改了javascript来引起后返回时用低于code选择了一个项目（摘录）：
注意：__doPostBack（'＆LT;％= DropDownList1.UniqueID％>'，''）;
选择：函数（事件，UI）{
ui.item.option.selected = TRUE;
self._trigger（选中，事件，{
项目：ui.item.option
}
）;
__doPostBack（'＆下;％= DropDownList1.UniqueID％GT;'，''）;
}，
这工作，并触发我在code事件背后。然而，组合框转回到asp.net的DropDownList。 jQuery的文件准备不再次触发和restyle组合框。我缺少的东西??
完整的源：
ASPX：
＆LT;％@页面语言=C＃AutoEventWireup =真codeBehind =TestPage2.aspx.cs继承=Sicon.Web.WAP.App。 Pages.TestPage2％GT;＆LT;％@注册SRC =../器WebControls / AdminControls / UserItemValueBuilder.ascx变量名=UserItemValueBuilder
标签preFIX =UC1％GT;
＆LT;％@注册SRC =../器WebControls / ModalMessageBox.ascx变量名=ModalMessageBox
标签preFIX =UC2％GT;
＆LT;％@注册SRC =../器WebControls / PageControls / BookOnJob.ascx变量名=BookOnJob
标签preFIX =UC3％GT;
！＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;链接的href =../ App_Themes文件/默认/ style.css中相对=样式类型=文/ CSS/＆GT;
＆LT;链接的href =../的JavaScript / jQuery的-ui.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT; /头＆GT;
＆LT; SCRIPT SRC =../的JavaScript / jquery.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =../的JavaScript / jQuery的-ui.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
（函数（$）{
$ .widget（ui.combobox，{
_create：功能（）{
VAR自我=这一点，
选择= this.element.hide（）
选择= select.children（：选择），
值= selected.val（）？ selected.text（）：;
VAR输入= this.input = $（＆LT;输入＆gt;中）
.insertAfter（选择）
.VAL（值）
.autocomplete（{
延迟：0，
的minLength：0，
来源：函数（请求，响应）{
VAR匹配=新的RegExp（$ ui.autocomplete.escapeRegex（request.term），I）;
响应（select.children（选项）。图（函数（）{
变种文字= $（本）的.text（）;
如果（THIS.VALUE＆安培;＆安培;！（request.term || matcher.test（文本）））
返回{
标签：text.replace（
新的RegExp（
（[^＆放大器;;] +;？！）（小于！[^＆所述;]的计算值*）（+
$ .ui.autocomplete.escapeRegex（request.term）+
？！）（[^＆所述;]的计算值* GT;！）（[^＆放大器;;] +），GI
），＆LT;强＆GT; $ 1 LT; / STRONG＆gt;中）
值：文本，
选项：此
};
}））;
}，
选择：函数（事件，UI）{
ui.item.option.selected = TRUE;
self._trigger（选中，事件，{
项目：ui.item.option
}
）;
__doPostBack（'＆下;％= DropDownList1.UniqueID％GT;'，''）;
}，
改变：函数（事件，UI）{
如果（！ui.item）{
VAR匹配=新的RegExp（^+ $ .ui.autocomplete.escapeRegex（$（本）.VAL（））+$，I），
有效= FALSE;
select.children（选项）。每个（函数（）{
如果（$（本）的.text（）。匹配（匹配））{
this.selected =有效= TRUE;
返回false;
}
}）;
如果（！有效）{
//删除无效的价值，因为它没有匹配
$（本）.VAL（）;
select.val（）;
。input.data（自动完成）一词=;
返回false;
}
}
}
}）
.addClass（UI小部件的UI控件内容的UI角左）; input.data（自动完成）._ renderItem =功能（UL，项目）{
返回$（＆LT;立GT;＆LT; /李＆gt;中）
。数据（item.autocomplete项）
.append（＆所述a取代;+ item.label +＆下; / A＆gt;中）
.appendTo（微升）;
}; this.button = $（＆LT;按钮式='按钮'＆GT;＆安培; NBSP;＆LT; /按钮＆gt;中）
.attr（的tabIndex，-1）
.attr（称号，显示所有项目）
.insertAfter（输入）
.button（{
图标：{
初级：UI图标三角-1-S
}，
文本：假
}）
.removeClass（UI角所有）
.addClass（UI角右UI按钮图标）
。点击（函数（）{
//关闭，如果已经显现
如果（input.autocomplete（小部件）是（：可见））{
input.autocomplete（亲密）;
返回;
} //工作大约一个bug（可能是相同的事业为＃5265）
$（本）.blur（）; //传递空字符串值，搜索，显示所有结果
input.autocomplete（搜索，）;
input.focus（）;
}）;
}， 破坏：功能（）{
this.input.remove（）;
this.button.remove（）;
this.element.show（）;
$ .Widget.prototype.destroy.call（本）;
}
}）;
}）（jQuery的）; $（文件）。就绪（函数（）{
$（＃DropDownList1），组合框（）。
}）;＆LT; / SCRIPT＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; ASP：的ScriptManager ID =ScriptManager1=服务器＆GT;
＆LT; / ASP：ScriptManager的＆GT;
＆LT; DIV ID =演示＆GT;
＆LT; ASP：的UpdatePanel =服务器ID =upMain的UpdateMode =始终＆GT;
＆LT;＆的ContentTemplate GT;
＆LT; ASP：DropDownList的ID =DropDownList1=服务器OnSelectedIndexChanged =DropDownList1_SelectedIndexChanged
的AutoPostBack =真＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; /＆的ContentTemplate GT;
＆LT; / ASP：的UpdatePanel＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
CS：
使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.UI程序;
使用System.Web.UI.WebControls;
使用Sicon.Web.WAP.Objects.Database;
使用System.Data这;
使用System.Data.SqlClient的;
使用Objects.Enums;
使用Objects.Sage;
使用Objects.Engine;
使用System.Collections.Generic;命名空间App.Pages
{
公共部分类TestPage2：Sicon.Web.WAP.Objects.Controls.User presencePage
{
保护无效的Page_Load（对象发件人，EventArgs的发送）
{
如果（！Page.IsPostBack）
{
DropDownList1.DataSource = Objects.Database.User.Users;
DropDownList1.DataTextField =用户名;
DropDownList1.DataBind（）;
}
} 保护无效DropDownList1_SelectedIndexChanged（对象发件人，EventArgs的发送）
{
字符串用户= DropDownList1.SelectedValue;
}
}
}
解决方案
解决方案是增加一个JavaScript页面加载事件，并再次调用配置功能（这要部分归功于约翰Kalberer）
函数configurePage（）{
$（＃DropDownList1），组合框（）。
} 功能页面加载（发件人，参数）{
configurePage（）;
}
This is a follow up to this question: dropdownlist to combobox
I have a Drop Down List that is being converted to jQuery combobox after the page is loaded. I have amended the javascript to caused a post back when an item is selected with the code below (extract):
note: __doPostBack('<%= DropDownList1.UniqueID %>', '');
select: function (event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
}
);
__doPostBack('<%= DropDownList1.UniqueID %>', '');
},
This works and fires my event in the code behind. however the ComboBox turns back to the asp.net DropDownList. The jQuery document ready does not fire again and restyle the combobox. Am I missing something??
full source: aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage2.aspx.cs" Inherits="Sicon.Web.WAP.App.Pages.TestPage2" %>
<%@ Register Src="../WebControls/AdminControls/UserItemValueBuilder.ascx" TagName="UserItemValueBuilder"
TagPrefix="uc1" %>
<%@ Register Src="../WebControls/ModalMessageBox.ascx" TagName="ModalMessageBox"
TagPrefix="uc2" %>
<%@ Register Src="../WebControls/PageControls/BookOnJob.ascx" TagName="BookOnJob"
TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../App_Themes/Default/Style.css" rel="stylesheet" type="text/css" />
<link href="../JavaScripts/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.widget("ui.combobox", {
_create: function () {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "";
var input = this.input = $("<input>")
.insertAfter(select)
.val(value)
.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
}
);
__doPostBack('<%= DropDownList1.UniqueID %>', '');
},
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);
};
this.button = $("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.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.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(document).ready(function () {
$("#DropDownList1").combobox();
});
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="demo">
<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Always">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
</div>
</form>
</body>
</html>
cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sicon.Web.WAP.Objects.Database;
using System.Data;
using System.Data.SqlClient;
using Objects.Enums;
using Objects.Sage;
using Objects.Engine;
using System.Collections.Generic;
namespace App.Pages
{
public partial class TestPage2 : Sicon.Web.WAP.Objects.Controls.UserPresencePage
{
protected void Page_Load( object sender, EventArgs e )
{
if (!Page.IsPostBack)
{
DropDownList1.DataSource = Objects.Database.User.Users;
DropDownList1.DataTextField = "UserName";
DropDownList1.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged( object sender, EventArgs e )
{
string user = DropDownList1.SelectedValue;
}
}
}
解决方案
Solution is to add a javascript page load event and call the configuration function again ( thanks in part to John Kalberer)
function configurePage() {
$("#DropDownList1").combobox();
}
function pageLoad(sender, args) {
configurePage();
}
这篇关于jQuery的组合框回发后失去造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
