UpdatePanel停止Javascript工作

本文关键字:工作 Javascript 停止 UpdatePanel | 更新日期: 2023-09-27 18:04:46

我有一个自动完成下拉菜单,它工作得很好,但是每次一个项目被添加到列表框时都会回发。

为了纠正这个问题,我将内容包装在更新面板中。在单击添加之前,自动完成功能按预期运行。在通常的回发位置,在添加项目后,自动完成不起作用。

代码如下:

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

有没有人能解释一下为什么会发生这种情况,以及如何修复它?

UpdatePanel停止Javascript工作

试试这个:使用

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