jQuery组合框和ASP.NET updatepanel

时间:2012-09-21 19:09:04

标签: jquery ajax combobox updatepanel

I found a combobox here现在,当我尝试在我的updatepanel中使用jQuery时,我遇到了一个问题。当我第一次打开页面直到发生部分回发时,组合框效果很好。因此,如果我要更改DropdownList ddlTagLevel3_1,那么下拉列表ddlTagname1不再显示jQuery组合框。有什么想法我需要做什么?这是我的代码,为简单起见省略了一些行(谢谢):

TagFilter.master:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
        <div id="div1" class="GridFilter" runat="server">
                <asp:Panel ID="Panel3" CssClass="PanelGridContents" runat="server">
            <div id="divTagFilterTable" runat="server">
                <asp:table ID="Table2" BorderWidth="0" CellPadding="4" runat="server">
                    <asp:TableRow>
                        <asp:TableCell>
                        <asp:Table ID="tblTagGridFilter" CellPadding="4" runat="server" CellSpacing="0" BackColor="White" CssClass="TagGridFilter" BorderStyle="Solid" BorderWidth="1">
                                                        <asp:TableRow ID="tr1" runat="server">
                                                            <asp:TableCell CssClass="TagGridFilter2" Wrap="false">
                                                                <asp:ImageButton runat="server" ID="ibAdd" OnClick="ibAdd_Click" ImageUrl="~/Images/add.gif" Visible="true"></asp:ImageButton>
                                                                <asp:Image runat="server" ID="ImageButton2" ImageUrl="~/Images/noImage.gif" Width="5px" Visible="true"></asp:Image>
                                                                <asp:ImageButton runat="server" ID="ibRemove" OnClick="ibRemove_Click" ImageUrl="~/Images/remove.gif" Visible="true"></asp:ImageButton>
                                                            </asp:TableCell>
                                                            <asp:TableCell BorderWidth="1" CssClass="TagGridFilter2" Wrap="false">
                                                                <asp:Button ID="btnGridSwap_1" runat="server" Text="M" OnClick="bntGridSwap_1Click" />
                                                            </asp:TableCell>
                                                            <asp:TableCell ID="tcDisplayLevel_1" ColumnSpan="3" BorderWidth="1" CssClass="TagGridFilter" Visible="false" Wrap="false">
                                                                <asp:DropDownList ID="ddlDisplay1" AutoPostBack="True" OnSelectedIndexChanged="ddlDisplay1Changed" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell ID="tcTagLevel1_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
                                                                <asp:DropDownList ID="ddlTagLevel1_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel1_1Changed" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell ID="tcTagLevel2_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
                                                                <asp:DropDownList ID="ddlTagLevel2_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel2_1Changed" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell ID="tcTagLevel3_1" BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
                                                                <asp:DropDownList ID="ddlTagLevel3_1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagLevel3_1Changed" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
                                                                <asp:Label id="lblDevice1" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell BorderWidth="1" CssClass="TagGridFilter" Wrap="false">
                                                                <asp:DropDownList ID="ddlTagname1" AutoPostBack="True" OnSelectedIndexChanged="ddlTagname_1Changed" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
                                                                <asp:Label id="lblDescription1" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
                                                                <asp:Label id="lblType1" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell BorderWidth="1" CssClass="TagGridFilter1" Wrap="false">
                                                                <asp:Label id="lblUOM1" runat="server" />
                                                            </asp:TableCell>
                                                            <asp:TableCell ID="tcNew1" Visible="false" BorderWidth="1" CssClass="TagGridFilter" Wrap="false" HorizontalAlign="Center">
                                                                <asp:ImageButton runat="server" ID="ibNewRecord1" OnClick="ibNewRecord1_Click" ImageUrl="~/Images/new_tiny.gif" Visible="false"></asp:ImageButton>
                                                            </asp:TableCell>
                                    </asp:TableRow>
                    </asp:Table>
                    </asp:TableCell>
                                </asp:table>
                        </div>
                </asp:Panel>
        </div>
</ContentTemplate>

TagSummaryDetail.aspx.cs:

    protected new void Page_PreRender(object sender, EventArgs e)
{
    base.Page_PreRender(sender, e);

    if (GridView_Summary.SelectedIndex < 0 && GridView_Summary.Rows.Count == 0)
        ProcessSelection();

    string style = @"
        <style>
            .ui-combobox {
                position: relative;
                display: inline-block;
                background: #ffffff;
            }
            .ui-combobox-toggle {
                position: absolute;
                top: 0;
                bottom: 0;
                margin-left: -1px;
                padding: 0;
                background: #ffffff
                /* adjust styles for IE 6/7 */
                *height: 1.7em;
                *top: 0.1em;
            }
            .ui-combobox-input {
                margin: 0;
                padding: 0.2em;
                background: #ffffff;
                width: 20em;
            }
            .ui-button-icon-only .ui-button-text { background: #e6e6e6; } 
        </style>";
    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "style", style);

    string script = @"
            <script>
                (function ($) {
                    $.widget(""ui.combobox"", {
                        _create: function () {
                            var input,
                        self = this,
                        select = this.element.hide(),
                        selected = select.children("":selected""),
                        value = selected.val() ? selected.text() : """",
                        wrapper = this.wrapper = $(""<span>"")
                            .addClass(""ui-combobox"")
                            .insertAfter(select);

                            input = $(""<input>"")
                        .appendTo(wrapper)
                        .val(value)
                        .addClass(""ui-state-default ui-combobox-input"")
                        .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
                                });
                            },
                            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);
                            };

                            $(""<a>"")
                        .attr(""tabIndex"", -1)
                        .attr(""title"", ""Show All Items"")
                        .appendTo(wrapper)
                        .button({
                            icons: {
                                primary: ""ui-icon-triangle-1-s""
                            },
                            text: false
                        })
                        .removeClass(""ui-corner-all"")
                        .addClass(""ui-corner-right ui-combobox-toggle"")
                        .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.wrapper.remove();
                            this.element.show();
                            $.Widget.prototype.destroy.call(this);
                        }
                    });
                })(jQuery);

                $(function () {
                    $(""#" + Master.Tagname1.ClientID + @""").combobox();  //Tagname1 is ddlTagname1
                    $(""#toggle"").click(function () {
                        $(""#" + Master.Tagname1.ClientID + @""").toggle();
                    });
                });
            </script>";

    this.Page.ClientScript.RegisterStartupScript(this.GetType(), "jQuery", script);

3 个答案:

答案 0 :(得分:0)

您需要在从服务器

返回的部分中添加init组合框的代码
@if(IsAjax)
{
<script>
   $(function() {
       // INIT AUTOCOMPLITE
    });
   </script>
}

根据您的描述,我了解到此代码仅在第一个加载页面上调用一次。但是每次更新html时都需要这样做。

答案 1 :(得分:0)

首先打开页面,而不是HTTP GET请求。

但是任何其他请求都是HTTP POST请求,因此您的脚本在此请求中不可用。

您需要注册脚本以在请求之前在UpdatePanel中使用它。

更多信息: http://helpondesk.blogspot.cz/2008/11/how-to-register-client-script-inside.html

答案 2 :(得分:0)

在页面上添加endRequest处理程序并再次分配组合框小部件。像这样:

$(document).ready(function() {
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(updateCombobox);
}

function updateCombobox() {
  $('#comobox').combobox();
});