jQuery多選小部件 - 單選內部更新面板後無法正常工作

我使用的是在asp.net頁面上的Eric Hynds多選小部件。控制在更新面板內。jQuery多選小部件 - 單選內部更新面板後無法正常工作

單選可以在第一次加載頁面時正常工作，但是在回發之後它不起作用。我無法從下拉菜單中選擇不同的項目。我曾嘗試在IE9和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 =「多個」但沒有成功。

這是腳本;

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 
});

}

來源

2015-02-11 user1263981

如果您的「回發」重寫DOM元素，則還需要重新初始化該控件 – blgt 2015-02-11 14:07:57

我已經嘗試過，但仍然無法正常工作 – user1263981 2015-02-11 16:06:58

除了使用PageRequestManager事件（PAGE_LOADED & endRequest）來調用subscribeClicks方法，你可以調用從代碼的方法的背後是這樣的：

Page.ClientScript.RegisterStartupScript(this.GetType(),"multiFn","subscribeClicks()",true);

把上面代碼在page_load方法中，以便它每次都會被調用這應該可以解決您的問題。祝你好運！

來源

2015-02-11 16:37:21

我設法在這裏找到解決方案http://tiku.io/questions/1502413/jquery-multiselect-widget-not-working-inside-asp-net-updatepanel以防萬一其他人在尋找它。

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 
}); 
});

編號：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將會丟失，因此該插件停止工作

來源

2015-02-11 17:08:40 user1263981

jQuery多選小部件 - 單選內部更新面板後無法正常工作

回答

相關問題