locked
Jquery Autocomplete WebMethod in Content Page not working RRS feed

  • Question

  • User-625015625 posted

     Hello guys, i´m trying to add jquery autocomplete feature to my website, i tested in a page without master page and it works fine, when i add to my content page, its not working.

    Independent Page Working

    Code

             <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js"></script>
          <script src="js/toastr.min.js"></script>
              <script type="text/javascript">
                  function showMessage(title, msg) {
                      toastr.warning(title, msg);
                  };
    </script>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
     
        <script type="text/javascript">
            $(document).ready(function () {
                $("#txtNames").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "default.aspx/GetFirstNames",
                            data: "{'namePrefix':'" + $("#txtNames").val() + "'}",
                            dataType: "json",
                            success: function (data) {
                                response(data.d)
                            },
                            error: function (response) {
                                alert("Error" + res.responseText);
                            }
                        });
                    }
                });
            });
        </script>
     
    <label for="txtNames">Names:</label>
     
    <asp:TextBox ID="txtNames" runat="server"></asp:TextBox>
     
     [WebMethod]
    
        public static string[] GetFirstNames(string namePrefix)
    
        {
    
            List<string> lstNames = new List<string>();
    
            DataTable dtNames = new DataTable();
    
            string sqlQuery = "select nombre from jugadores where nombre LIKE'%" + namePrefix + "%'";
      
            string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["test"].ConnectionString;
    
            try
    
            {
    
                SqlConnection conn = new SqlConnection(connectionString);
    
                SqlDataAdapter da = new SqlDataAdapter(sqlQuery, conn);
    
                da.Fill(dtNames);
    
                foreach (DataRow row in dtNames.Rows)
    
                {
    
                    string name = Convert.ToString(row["nombre"]);
    
                    lstNames.Add(name);
    
                }
    
            }
    
            catch (Exception ex)
    
            {
    
                throw ex;
    
            }
    
            return lstNames.ToArray<string>();
    
        }


    At the end of my Master Page ContentPlaceHolder Body i have all script references. I have others Jquery routines working fine.

    Sunday, January 29, 2017 7:07 PM

All replies

  • User475983607 posted

    Use the following syntax when referencing server controls client side.

    $("#<% =txtNames.ClientID %>")

    ASP Web Forms updates the control Id when server controls are nested within other controls like master pages.  

    Sunday, January 29, 2017 7:43 PM
  • User-625015625 posted

    UPDATE: Ok, I find the problem, service was bad referenced, right now its working on textbox, i have a grid and this textbox inside item template, and grid inside updatepanel, i move textbox outside grid and its works, but inside gridview is not working, any help? 

    I do this in the Head of my Content Page but not working.

    <script type="text/javascript">
    
            $(document).ready(function () {
    
                $("#txtNames").autocomplete({
    
                    source: function (request, response) {
    
                        $.ajax({
    
                            type: "POST",
    
                            contentType: "application/json; charset=utf-8",
    
                            url: "~/PanelCap.aspx/GetFirstNames",
                            
                            data: "{'namePrefix':'" +  $("#<% =txtNames.ClientID %>").val() + "'}",
    
                            dataType: "json",
    
                            success: function (data) {
    
                                response(data.d)
    
                            },
    
                            error: function (response) {
    
                                alert("Error" + res.responseText);
    
                            }
    
                        });
    
                    }
    
                });
    
            });
    
        </script>

    What can i do? Any other help?

    Sunday, January 29, 2017 9:40 PM
  • User2103319870 posted

    $("#txtNames").autocomplete({

    You have missed to use the client option on above code also.

      <script type="text/javascript">
                $(document).ready(function () {
                    //Use clientid here also
                    $("#<% =txtNames.ClientID %>").autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                url: "~/PanelCap.aspx/GetFirstNames",
                                data: "{'namePrefix':'" + $("#<% =txtNames.ClientID %>").val() + "'}",
                                dataType: "json",
                                success: function (data) {
                                    response(data.d)
                                },
                                error: function (response) {
                                    alert("Error" + res.responseText);
                                }
                            });
                        }
                    });
                });
    
            </script>

    Sunday, January 29, 2017 10:22 PM
  • User2103319870 posted

    Another easy option is to use ClientIdMode of textbox  If you are using .Net Framework 4.0 . Set the ClientIDMode to Static.

            <asp:TextBox ID="txtNames" runat="server" ClientIDMode="Static"></asp:TextBox>
    

    You can get more details on below link

     

    Sunday, January 29, 2017 10:25 PM
  • User-625015625 posted

    Thats correct, i idid it and change path of webservice in order to work "~/" for "", right now i got another problem about this, i have a gridview and the txtNames inside item template, it works outside gridview but not inside gridview. Any help?

    txtNames doesnt exists in the current context is the error.

    Sunday, January 29, 2017 10:28 PM
  • User-2057865890 posted

    Hi Betzero,

    have a gridview and the txtNames inside item template, it works outside gridview but not inside gridview. Any help?

    You could try below code snippets.

    $(document).ready(function () {
                $("[id*=txtNames]").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "default.aspx/GetFirstNames",
                            data: "{'namePrefix':'" + request.term + "'}",
                            dataType: "json",
                            success: function (data) {
                                response(data.d)
                            },
                            error: function (response) {
                                alert("Error" + res.responseText);
                            }
                        });
                    }
                });
            });

    reference: http://stackoverflow.com/a/24061785

    Best Regards,

    Chris

    Wednesday, February 1, 2017 5:40 AM
  • User-198964422 posted

    add a class to the textbox and use the class for writing the query

    Wednesday, February 1, 2017 6:01 AM