logo标签列表

ASP.NET UpdatePanel中Select2 JQuery问题

asp.netajaxcontroltoolkitjquery-select2
3

我被要求使用Select2 JQuery库增强现有解决方案。

有一个updatepanel具有保存按钮。在该updatepanel上有一个ASP.NET DropDownList。

文档准备就绪时，我发布以下内容：

$('.dropdownspecificclass').select2();

当页面第一次渲染时，下拉列表具有Select2提供的标签视图。单击保存按钮并完成保存过程（异步进行，无需刷新页面），但Select2下拉列表失去了其Select2样式，现在看起来只像一个普通的下拉列表。
如果我尝试将Select2类应用于控件的CssClass属性，则客户端会出现JavaScript错误："Uncaught query function not defined for Select2 selectControlName"。
有什么想法吗？
4个回答
9

我曾经遇到过同样的问题。不要在document.ready函数中执行命令，而是在pageLoad函数中执行命令。pageLoad函数将在部分后续请求期间被执行。

function pageLoad(sender, args) {
        $(".dropdownspecificclass").select2();
    }
这解决了我的问题，有趣的是因为 pageLoad 在部分回发期间被执行！谢谢。 - Niklas
1
根据设计和select2文档，选择html元素不需要任何特殊解析（数据从选项标签中解析），为了将选择器限制为仅选择元素（在上面的情况下，“ASP.NET DropDownList”呈现为选择html元素），我建议进行以下更改。
“Uncaught query function not defined for Select2”异常通常发生在除选择元素之外的情况。
//Replace your selector by prefixing select as below and then give a try
$('select.dropdownspecificclass').select2();
1

示例代码，使用select2和bootstrap的asp.net下拉列表：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo_Select2.aspx.cs" Inherits="Demo_Select2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select.min.css" rel="stylesheet" />

<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>


<script src="Scripts/select2.min.js"></script>
<link href="Content/css/select2.css" rel="stylesheet" />
<link href="Content/select2-bootstrap.css" rel="stylesheet" />

<meta name="viewport" content="width=device-width, initial-scale=1" />


<script type="text/javascript">
    function pageLoad() {
        $(".js-example-placeholder-single").select2({
            theme: "bootstrap",
            placeholder: "Select Item",
            allowClear: true
        });
    }
</script>
</head>
<body>
<form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" class="form-control" AutoPostBack="true">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>test b1</asp:ListItem>
                    <asp:ListItem>test b2</asp:ListItem>
                    <asp:ListItem>test b3</asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

        <asp:DropDownList ID="DropDownList2" runat="server" class="form-control js-example-placeholder-single" AutoPostBack="true">
                    <asp:ListItem></asp:ListItem>
            <asp:ListItem>test c1</asp:ListItem>
            <asp:ListItem>test c2</asp:ListItem>
            <asp:ListItem>test c3</asp:ListItem>
        </asp:DropDownList>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList3" runat="server" class="form-control js-example-placeholder-single" AutoPostBack="true">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>test d1</asp:ListItem>
                    <asp:ListItem>test d2</asp:ListItem>
                    <asp:ListItem>test d3</asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
</form>

enter image description here

0

问题不在于 select2。这似乎是一个已知的问题，我认为你肯定会从这里得到一些帮助：ASP.NET AJAX UpdatePanels & jQuery 函数之间的冲突。

关于jquery问题在触发任何ajax之后有完整的解释，也有各种建议的解决方法。

但是如果以上都没有问题，你可以尝试将.select2()重新初始化到你的异步.done()事件中。

我相信我们正在使用的JQuery版本可以解决客户端事件绑定的问题。所有其他使用Jquery的响应逻辑仍然有效。例如，我们使用$(selector).on("click")而不是$(selector).click。我相信on的工作方式类似于live并且会监视更改。你所说的.done()是否指endRequestHandler？我们在endRequestHandler中重新初始化但没有成功。 - Keith Franklin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接