jQuery的多选部件 - 后单后选择内更新面板不工作回来 [英] Jquery multiselect widget - Single select inside update panel is not working after post back
问题描述
我使用asp.net页面上埃里克·海因兹多选部件。控制更新面板内。
I am using Eric Hynds multiselect widget on asp.net page. Control is inside update panel.
单选择正常工作第一次加载页面，但回来后后它不工作。我无法从下拉菜单中选择不同的项目。我曾尝试在IE9和FF。
Single select works fine the first time page is loaded but after post back it is not working. I can't select the different item from the drop down. I have tried in IE9 and FF.
<head runat="server">
<title ></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="app_theme/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="app_theme/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/jquery.multiselect.min.js"></script>
<script type="text/javascript" src="scripts/jquery.multiselect.filter.js"></script>
</head>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="updSearch" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<div id="uc_DDiscipline">
<asp:ListBox ID="GroupDropDownList2" runat="server">
<asp:ListItem Text="first" Value="1"></asp:ListItem>
<asp:ListItem Text="second" Value="2"></asp:ListItem>
<asp:ListItem Text="third" Value="3"></asp:ListItem>
</asp:ListBox>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<script type="text/javascript" src="/scripts/inspector-search.js"></script>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
我曾尝试与无的SelectionMode =多，但没有成功。
I have tried with and without SelectionMode="Multiple" but no success.
下面是脚本;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(subscribeClicks);
prm.add_endRequest(function () {
$("#uc_DDiscipline select").multiselect({
//multiple: true,
header: "-- View All --",
multiple: false,
noneSelectedText: "-- View All --",
selectedList: 1,
minWidth: 265
});
$('#uc_DDiscipline select').removeClass('ui-multiselect-menu');
});
function subscribeClicks() {
$("#uc_DDiscipline select").multiselect({
//multiple: true,
header: "-- View All --",
multiple: false,
noneSelectedText: "-- View All --",
selectedList: 1,
minWidth: 265
});
}
推荐答案
我设法在这里<一个找到解决办法href=\"http://tiku.io/questions/1502413/jquery-multiselect-widget-not-working-inside-asp-net-updatepanel\" rel=\"nofollow\">http://tiku.io/questions/1502413/jquery-multiselect-widget-not-working-inside-asp-net-updatepanel在某些情况下，其他人在寻找它。
I managed to find the solution here http://tiku.io/questions/1502413/jquery-multiselect-widget-not-working-inside-asp-net-updatepanel in case some else is looking for it.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('.ui-multiselect-menu').each(function () {
$(this).remove();
});
$('#uc_DDiscipline select').multiselect({
header: "-- View All --",
multiple: false,
noneSelectedText: "-- View All --",
selectedList: 1,
minWidth: 265
});
});
//On Page Load
$(function () {
$("#uc_DDiscipline select").multiselect({
//multiple: true,
header: "-- View All --",
multiple: false,
noneSelectedText: "-- View All --",
selectedList: 1,
minWidth: 265
});
});
参考：<一href=\"http://www.aspsnippets.com/Articles/jQuery-Plugins-not-working-after-ASPNet-AJAX-UpdatePanel-Partial-PostBack-or-when-Asynchronous-request-is-over.aspx\" rel=\"nofollow\">http://www.aspsnippets.com/Articles/jQuery-Plugins-not-working-after-ASPNet-AJAX-UpdatePanel-Partial-PostBack-or-when-Asynchronous-request-is-over.aspx
原因：
所有的jQuery插件都在的HTML页面或者换句话说Page Load事件应用于文档时，整个页面或文档浏览器完全呈现其发射准备的事件。现在应用的jQuery插件时，分配一个唯一的标识所有控件。但是，当一些控制是内部的UpdatePanel并发生局部回传的jQuery分配的唯一ID丢失，因此插件停止工作。
All jQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working
这篇关于jQuery的多选部件 - 后单后选择内更新面板不工作回来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
