2015-12-18 38 views
0

試圖設置jQuery自動完成,我已經達到了一個令人沮喪的地步。我在我的aspx頁面得到這個代碼:jQuery自動完成不能在母版頁內工作

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

,幷包含標籤的容器,標籤面板,更新面板的div和類似一個相當大的文件中,我有這個文本框:

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

我也有以下的Web服務:

[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仍然有點新鮮。

回答

0

我發現了答案。如果我更換:

 $(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() { 

在JavaScript代碼和其他原樣留下的一切,它的作品完美。顯然它確實與更新面板做了部分回發,它重新分配了唯一的ID。