jQuery Autocomplete не работает с главной страницы

Question

Пытается создать jQuery Autocomplete, и я ударил разочарование. Я получил этот код на моей странице ASPX:

<script type="text/javascript"> 
    /*******************************/ 
    /* Autocomplete the textboxes */ 
    /* This responds fine if the javascript is inside the html tags and outside of the form tags, but 
    /* since this page has a Master Page File I can't do that. 
    /*******************************/ 
    $(document).ready(function() { 
     $("#<%=txtPayers.ClientID %>").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '<%=ResolveUrl("~/Autocomplete.asmx/ISGetCompletionList") %>', 
        data: "{ 'prefixText': '" + request.term + "'}", 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         response($.map(data.d, function (item) { 
          return { 
           label: item.split('-')[0], 
           val: item.split('-')[1] 
          } 
         })) 
        }, 
        error: function (response) { 
         alert(response.responseText); 
        }, 
        failure: function (response) { 
         alert(response.responseText); 
        } 
       }); 
      }, 
      select: function (e, i) { 
       $("#<%=hfPayer.ClientID %>").val(i.item.val); 
      }, 
      minLength: 1 
     }); 
    }); 
</script> 

и внутри достаточно большой файл, который содержит вкладку контейнеры, вкладку панель, обновление панель, див и тому подобные, у меня есть текстовое поле:

<asp:TextBox ID="txtPayers" runat="server" ClientIdMode="Static"></asp:TextBox> 

у меня также есть следующие веб-службы:

[WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

    public string[] ISGetCompletionList(string prefixText) 
    { 
     string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["CLTDPL"].ConnectionString; 
     SqlConnection conn = new SqlConnection(connectionString); 

     List<string> Payers = new List<string>(); 
     using (SqlCommand cmd = new SqlCommand()) 
     { 
      cmd.CommandText = "SELECT [PAYER_ID], [PAYER_TYPE] FROM [mos_Payer] WHERE " + 
      "PAYER_TYPE like '%' + @SearchText + '%'"; 
      cmd.Parameters.AddWithValue("@SearchText", prefixText); 
      cmd.Connection = conn; 
      conn.Open(); 
      using (SqlDataReader sdr = cmd.ExecuteReader()) 
      { 
       while (sdr.Read()) 
       { 
        Payers.Add(string.Format("{0}-{1}", sdr["PAYER_TYPE"], sdr["PAYER_ID"])); 
       } 
      } 
      conn.Close(); 
     } 
     return Payers.ToArray(); 
    } 

Если я положил все это на тестовой странице и запустить его, он отлично работает. Тем не менее, фактическая страница, в которой я нуждаюсь, имеет файл главной страницы, и он не работает в этом контексте. Ну, в первый раз, когда я запускаю его, он отлично работает. Но на странице есть несколько выпадающих списков, которые, когда что-то выбрано, скрывают и скрывают другие элементы управления. Как только я это сделаю, автозаполнение перестанет работать.

Любые идеи? Я также видел этот вопрос:

jQuery not working with Master Page

и один из ответов говорят использовать .on() если обновление панель участвуют? Я понятия не имею, как это реализовать, но я все еще немного новичок в javascript.

Answer 1

Я нашел ответ. Если я заменяю:

 $(document).ready(function() { 

с:

 //On Page Load. 
    $(function() { 
     SetAutoComplete(); 
    }); 

    //On UpdatePanel Refresh. 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    if (prm != null) { 
     prm.add_endRequest(function (sender, e) { 
      if (sender._postBackSettings.panelsToUpdate != null) { 
       SetAutoComplete(); 
      } 
     }); 
    }; 

    function SetAutoComplete() { 

в яваскрипта код и оставить все остальное как есть, она работает идеально. По-видимому, это связано с тем, что панель обновления выполняет частичную обратную передачу, которая переназначает уникальные идентификаторы.