UpdatePanel stops Javascript Working

Question

I have a autocomplete dropdown which works fine, it however does a postback everytime an item is addded to the list box.

To rectify this I have wrapped the content in an update panel. The autocomplete functions as expected until you click add. Where the postback would usaully be, after the item has been added the autocomplete does not work.

Below is the code:

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

Can anyone shed any light on why this might be happening and how to fix it?

Thanks in advance !

Answer 1

Try this: Use

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

for UpdatePanels instead of

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

Example(not tested):

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