Search code examples
c#javascriptjqueryasp.netcontentplaceholder

Why auto complete jquery in Textbox is not working when used within content placeholder?

On my web form I am using a auto complete Jquery in a Textbox. This Jquery is working fine when I am using it in a normal HTML page i.e. below title tag and within head tag, But not working when I am using it in a contentplaceholder. This is my aspx page-

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script type="text/javascript">
      $(function () {
      var items=[<%=autotag %>];
      $("TextBox1").autocomplete({
      source:items
      });
      });
  </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table width="97%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td><asp:TextBox ID="TextBox1" runat="server" Width="150px" AutoPostBack="True" 
        ontextchanged="TextBox1_TextChanged"></asp:TextBox></td></tr>
</table>
</asp:Content>

And this is my normal html page-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script type="text/javascript">
      $(function () {
      var items=[<%=autotag %>];
      $("#TextBox1").autocomplete({
      source:items
      });
      });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
    <tr>
    <td>Name:</td>
    <td>
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" 
            ontextchanged="TextBox1_TextChanged"></asp:TextBox></td>
    </tr>
    </table>
    </div>
    </form>
</body>
</html>

This is my cs page-

public void bind1()
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);
        con.Open();
        string query = "select name from tbl_names where name like '" + TextBox1.Text + "'+'%'";
        SqlCommand cmd = new SqlCommand(query, con);
        SqlDataReader dr = cmd.ExecuteReader();
        dr.Read();
        while (dr.Read())
        {
            if (string.IsNullOrEmpty(autotag))
            {
                //autotag += "\"" + dr["name"].ToString() + "\"";
                autotag += "\"" + dr["name"].ToString() + "\"";
            }
            else
            {
                //autotag += ", \"" + dr["name"].ToString() + "\"";
                autotag += ", \"" + dr["name"].ToString() + "\"";
            }
        }
    }

Please guide me why my auto complete jquery is not working inside contentplaceholder. Please guide me where I am doing wrong?

Solution

  • Set ClientIDMode to Static as asp.net changes id of controls on rendering:

    <asp:TextBox ID="TextBox1" runat="server" Width="150px" AutoPostBack="True" 
        ontextchanged="TextBox1_TextChanged" ClientIDMode="Static"></asp:TextBox>

    or if you don't want to do that, then use the ClientID property of the control in the client side code like:

    var textBox1 = "<%=this.TextBox1.ClientID %>";
$("#"+textBox1).autocomplete({
  source:items
});