Question

我有一个下拉列表，在页面加载后转换为jQuery组合框。我已经修改了javascript，当使用下面的代码（提取）选择一个项目时导致回复：

注意：__ doPostBack（'＆lt;％= DropDownList1.UniqueID％＆gt;'，''）;

                 select: function (event, ui) {
                     ui.item.option.selected = true;
                     self._trigger("selected", event, {
                         item: ui.item.option
                     }
                     );
                     __doPostBack('<%= DropDownList1.UniqueID %>', '');
                 },

这可以在后面的代码中触发我的事件。然而，ComboBox转回到asp.net DropDownList。准备好的jQuery文档不会再次触发并重新组合组合框。我错过了什么吗？

完整来源： 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'>&nbsp;</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;
        }


    }
}

Answer 1

将此添加到您的更新面板

<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Always" OnUpdateCompleteClientScript="setupPage();">
            </asp:UpdatePanel>

并将其用作脚本

function setupPage() {
    $("#DropDownList1").combobox();
}    

$(document).ready(function () {
    setupPage();
});

Answer 2

解决方案是添加一个javascript页面加载事件并再次调用配置函数（部分归功于John Kalberer）

function configurePage() {
        $("#DropDownList1").combobox();
    }

    function pageLoad(sender, args) {
        configurePage();
    }

jQuery ComboBox在回发后失去样式

2 个答案: