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

为的UpdatePanel而不是

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