Javascript autocomplete not working in ascx

Question

I have a autocomplete in a grid-view in a ascx file but the autocomplete is not working in the ascx file. I have made several similar autocomplete in other page that work. Why is it that the autocomplete does not work in my ascx file. I have a hypotheses why it does not work but I am unsure how to fix it here it is

I think that the problem is with the following url in the javascript

      url: "contratoGerencia.aspx/getSupplierAndComponente"

However I dont know how I should change it don get it to work with the ascx file.Also I found a solution here https://www.codeproject.com/Questions/757769/How-to-Call-Ascx-page-form-JavaScript-Funnction-Of that is almost what I want the only problem is that I also have a textbox in my situation. Any help would be very appreciated. I hope the following information will help you.

Here is my ascx (ComponentesControler.ascx) code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="../css/autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../scripts/autocomplete.js" ></script>
    <asp:TextBox CssClass="gridContractAndComponente" ID="txtContractComponenteFooter" Text="" runat="server" TextMode="MultiLine" Rows="1" />

Here is my ascx.cs (ComponentesControler.ascx.cs) code

   [WebMethod]
        public static List<string> getSupplierAndComponente(string prefixText)
        {
            string lv_numero_contrato;
            List<string> numeros_contrato = new List<string>();
            connectionStringBuilder builder = new connectionStringBuilder();
            String connString;
            connString = builder.builder.ConnectionString;

            string selectStatement = " SELECT numero_contrato FROM erp_contratos ";


            using (MySqlConnection conn = new MySql.Data.MySqlClient.MySqlConnection(connString))
            {
                conn.Open();
                using (MySqlCommand cmd = conn.CreateCommand())
                {
                    cmd.CommandText = selectStatement;
                    cmd.Parameters.AddWithValue("@searchText", prefixText);
                    using (MySqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            lv_numero_contrato = reader.GetString(reader.GetOrdinal("numero_contrato"));
                            numeros_contrato.Add(lv_numero_contrato);
                        }
                    }
                    conn.Close();
                }
            }
            return numeros_contrato;
        }

Here is the aspx page (contratoGerencia.aspx) were I use the ascx file

  <div id="ComponentesSection" class="menusection">         
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always" >
      <ContentTemplate>                   
    <TWebControl5:WebControl5 ID="Header8" runat="server" />                   
    </ContentTemplate>  
   </asp:UpdatePanel>
  </div>

Here is my javascript file (autocomplete.js)

$(document).ready(function () {
    SearchSupplierAndComponente();
});
function SearchSupplierAndComponente() {
    $(".gridContractAndComponente").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "contratoGerencia.aspx/getSupplierAndComponente",
                data: "{'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
    });
}

So do you get any JS error in console? When you do a breakpoint in WebMethod is that breakpoint hit by the compailer? — SehaxX, Aug 26 '19 at 09:29
When I add a break-point in the WebMethod it never stops in theWebMethod. Yes I get the following JS error in my console autocomplete is not a function. — J.C, Aug 26 '19 at 11:30
I think your problem is the UpdatePanel, please try this out: https://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels — SehaxX, Aug 26 '19 at 12:15
@JuniorCortenbach that console error means that some part of the JS code is not loaded properly. Try moving the script tags that you have on your ComponentesControler.ascx to your main master page. — Canica, Aug 26 '19 at 12:30
When you say move JS code to main page what do you mean? I have tried to move the JS in the master page and in contractoGerencia and know have work. I also change the url deppending on the location of file. — J.C, Aug 26 '19 at 13:59
@JuniorCortenbach sure, it may make it easier with your setup — Canica, Aug 26 '19 at 18:16
But i need the webmethod in the ascx file since there is where I want to use it. — J.C, Aug 26 '19 at 18:23

score 4 · Accepted Answer · answered Aug 26 '19 at 18:02

4

The problem is in the name of your parameter entered in AJAX, your method expects to receive a parameter named prefixText and not containedText.

Change

data: {'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}

with

data: {'prefixText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}

answered Aug 26 '19 at 18:02

Renan Barbosa

1,046
3
11
31

Yes I have notice it but even if I change parameter named prefixText and not containedText the autocomplete still does not work – J.C Aug 26 '19 at 18:23
1

I see, from what I've verified you referenced the scripts in the correct order, but it could be that the page that calls your ascx or even a MasterPage may be calling some script repeatedly. Make sure the jquery scripts you are using are not being called and loaded more than once, this may be causing some conflict. – Renan Barbosa Aug 26 '19 at 18:41
You are rigth I am calling the javascript on diffrent page I will try to remove them and make sure that I am not using them repeatedly. Thank you for your advice. – J.C Aug 26 '19 at 19:55
Yes you were right the different page were calling the some script repeatedly witch caused the problem. Thank you thank you – J.C Aug 30 '19 at 22:17

score 2 · Answer 2 · answered Aug 26 '19 at 12:18

The issue can be triggered by the UpdatePanel like explained here: jQuery $(document).ready and UpdatePanels?

So modify your autocomplete.js like this:

$(document).ready(function() {
    SearchSupplierAndComponente();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    SearchSupplierAndComponente();
});



function SearchSupplierAndComponente() {
    $(".gridContractAndComponente").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "contratoGerencia.aspx/getSupplierAndComponente",
                data: "{'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
    });
}

See if the console error goes away.

Javascript autocomplete not working in ascx

2 Answers2