UpdatePanel停止Javascript工作

Question

我有一个自动完成下拉列表，它可以正常工作，但是每当将一个项目添加到列表框中时，它都会进行回发。

为了解决这个问题，我将内容包装在更新面板中。 自动完成功能将按预期运行，直到您单击添加。 在项目被添加后，回传应该成功的地方是自动完成功能不起作用。

下面是代码：

aspx：

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="row">
            <div class="span4">
                <h3>
                    Create Season</h3>
            </div>
        </div>
        <div class="row">
            <div class="span2">
                <label class="control-label" for="TeamName">
                    Season Name:</label>
            </div>
            <div class="span3">
                <asp:TextBox ID="SeasonNameTextBox" runat="server" Text="Premier League"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <div class="span2">
                <label class="control-label" for="TeamName">
                    Season Year:</label>
            </div>
            <div class="span3">
                <asp:DropDownList ID="DropDownList1" runat="server" Width="100px">
                    <asp:ListItem>2012/13</asp:ListItem>
                    <asp:ListItem Value="2013/14">2013/14</asp:ListItem>
                    <asp:ListItem>2014/15</asp:ListItem>
                    <asp:ListItem>2015/16</asp:ListItem>
                </asp:DropDownList>
            </div>
        </div>
        <div class="row">
            <div class="span2">
                <label class="control-label" for="TeamName">
                    Add Team to Season:</label></p>
            </div>
            <div class="span3">
                <asp:TextBox ID="TeamNameTextBox" runat="server" CssClass="searchinput"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <div class="span2">
            </div>
            <div class="span3">
                <p>
                    <asp:Button ID="AddTeamButton" CssClass="btn btn-primary" runat="server" Text="Add"
                        OnClick="AddTeamButton_Click" /></p>
            </div>
        </div>
        <div class="row">
            <div class="span2">
                <label class="control-label" for="TeamName">
                    Seasons Teams:</label></p>
            </div>
            <div class="span3">
                <asp:ListBox ID="TeamNameListBox" runat="server"></asp:ListBox>
                <asp:Button ID="SubmitTeamsButton" CssClass="btn btn-primary" runat="server" Text="Submit"
                    OnClick="SubmitTeamsButton_Click" />
                <asp:Literal ID="TeamCount" runat="server"></asp:Literal>
            </div>
        </div>
        <div class="row">
            <div class="span9">
                <p>
                    <asp:Literal ID="CreateSeasonError" runat="server"></asp:Literal></p>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".searchinput").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "PredictiveSearch.asmx/GetAllPredictions",
                            data: "{'keywordStartsWith':'" + request.term + "'}",
                            dataType: "json",
                            async: true,
                            success: function (data) {
                                response(data.d);

                            },
                            error: function (result) {
                                alert("Due to unexpected errors we were unable to load data");
                            }
                        });
                    },
                    minLength: 1
                });
            });
        </script>
    </ContentTemplate>
</asp:UpdatePanel>

asmx：

 [System.Web.Script.Services.ScriptService]
public class PredictiveSearch : System.Web.Services.WebService
{

    [WebMethod]
    public IList<string> GetAllPredictions(string keywordStartsWith)
    {
        //TODO: implement real search here!

        SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["RaiseFantasyLeagueConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand("[dbo].[findEnglishTeams]", conn);
        cmd.CommandType = CommandType.StoredProcedure;

        string searchTerm = keywordStartsWith;
        SqlParameter searchTermParam = new SqlParameter("@searchterm", searchTerm);

        cmd.Parameters.Add(searchTermParam);

        IList<string> output = new List<string>();

        conn.Open();
        SqlDataReader dReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        if (dReader.HasRows)
        {
            while (dReader.Read())
            {
                output.Add(dReader["englishTeamName"].ToString());
            }
            return output;
        }
        else
        {
            return output; 
        }
    }
}

谁能阐明为什么会发生这种情况以及如何解决？

提前致谢 ！

Answer 1

试试这个：使用

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded();

用于UpdatePanels而不是

$(document).ready() {.. }

示例（未测试）：

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(yourAutoCompleteInitializationFunction);

function yourAutoCompleteInitializationFunction() {
$(".searchinput").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "PredictiveSearch.asmx/GetAllPredictions",
                            data: "{'keywordStartsWith':'" + request.term + "'}",
                            dataType: "json",
                            async: true,
                            success: function (data) {
                                response(data.d);

                            },
                            error: function (result) {
                                alert("Due to unexpected errors we were unable to load data");
                            }
                        });
                    },
                    minLength: 1
                });
}