locked
Runtime-fout JavaScript: cannot call methods on autocomplete prior to initialization. RRS feed

  • Question

  • User-1121540557 posted

    Hi,

    I've just upgraded my application to JQuery 1.12 from 1.8.1

    I'm getting this error when the page initialize.

     Runtime-error JavaScript: cannot call methods on autocomplete prior to initialization; attempted to call method 'GetAllDepartments.ashx'

            $("#txDepartment").autocomplete('GetAllDepartments.ashx', {
                dataType: 'json',
                max: 100,
                parse: function (data) {
                    var rows = new Array();
                    for (var i = 0; i < data.length; i++) {
                        rows[i] = { data: data[i], 
    value: data[i].Code,
    result: data[i].Name,
    id: data[i].depID
    }; } return rows; }, formatItem: function (row) { return row.Name; }, //delay: 400, autofill: true, selectFirst: false, highlight: false }).result(function (event, row) { $("#<%= depCode.ClientID %>").val(row.Code); }); $("#txDepartment").bind("keypress", function (e) { if (e.keyCode == 13) { return false; } });

    And here is my .ashx code

            public void ProcessRequest(HttpContext context)
            {
                string queryString = string.Empty;
                if (HttpContext.Current.Request.Params["q"] != null)
                    queryString = HttpContext.Current.Request.Params["q"];
    
                var departments = DAL.GetAllDepartmentsCollection();
                departments = (from c in Departments
                               where c.InUse
                               select new Database.Statistic.Departments
                               {
                                   Code = c.Code,
                                   DepartmentID = c.DepartmentID,
                                   InUse = c.InUse,
                                   EmployeeID = c.EmployeeID,
                                   Name = c.Name + " (" + c.Code + ") "
                               }).ToList();
    
                if (!string.IsNullOrEmpty(queryString))
                {
    
                    Departments = (from c in Departments
                                   where c.Name.ToUpper().Contains(queryString.ToUpper())
                                   select c).ToList();
    
                }
    
                JavaScriptSerializer ser = new JavaScriptSerializer();
                context.Response.Write(ser.Serialize(Departments));
            }
    

    best regards,

    Mark

    Tuesday, February 16, 2016 12:28 PM

Answers

  • User632428103 posted

    Hello mark,

    first step is to be sure that your migration work well after for parsing your data ...

    perhpas like this =>

     $("#txtSearch").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            url: "autoCompleteWithParameter.aspx/GetDatas",
                            data: "{username:'test'}" ,  
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            success: function (data)
                            {
                                ADD YOUR PARSE HERE
                            },
                            error: function (xhr, status, err)
                            {
                                alert('Error :' + err + ' status ' + status + ' xhr ' + xhr);
                            }
                        });
                    },
                    minLength: 2
                });

    http://stackoverflow.com/questions/17342370/parse-json-in-jquery-autocomplete

    Hope this help

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2016 3:47 PM
  • User475983607 posted

    clubict

    If I do what you say, I'll get a error "row is undefined"

    You have this unknown row.Code property that you're using to set the value of a textbox.

    $("#<%= txDepCode.ClientID %>").val(row.Code)

    The result of the line of code is a literal txDepCode.ClientID=row.Code in the HTTP body.   The ashx logic is not looking for this input field in the request plus the request is marked as JSON but your sending a forms post.

    Please see the following tutorial that explains how to send JSON data to a handler.

    http://codepedia.info/2015/05/generic-handler-ashx-file-post-send-json-data-parameters-in-asp-net-c-jquery/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2016 9:33 PM

All replies

  • User632428103 posted

    Hello clubict,

    never work with jquery 1.12 or 1.8.1 but i suppose your initialize the autocomplete with $(document).ready .... ?

    Autocomplete if i remember is on the jquery UI file do you add this file to your project ?

    i have a sample with autocomplete here is it  :

     <script src="../../../Scripts/jquery-2.0.3.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                $("#txtSearch").autocomplete(
                    {
                        source: '<%=ResolveUrl("ISearchHandler.ashx" ) %>'
                        , minLength: 2
                        , highlightItem: true
                        , multiple: true
                        , multipleSeparator: " " 
                    }
                    );
            });
        </script>

    here is it also a nice article about jquery auto complete :

    http://www.aspsnippets.com/Articles/Implement-jQuery-AutoComplete-TextBox-using-Generic-Handler-in-ASPNet-using-C-and-VBNet.aspx

    hope this help

    Tuesday, February 16, 2016 12:58 PM
  • User-1121540557 posted

    Hi Jimmy,

    Yes I use document.ready function.

    But how do I parse my data?

    best regards,

    Mark

    Tuesday, February 16, 2016 3:34 PM
  • User632428103 posted

    Hello mark,

    first step is to be sure that your migration work well after for parsing your data ...

    perhpas like this =>

     $("#txtSearch").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            url: "autoCompleteWithParameter.aspx/GetDatas",
                            data: "{username:'test'}" ,  
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            success: function (data)
                            {
                                ADD YOUR PARSE HERE
                            },
                            error: function (xhr, status, err)
                            {
                                alert('Error :' + err + ' status ' + status + ' xhr ' + xhr);
                            }
                        });
                    },
                    minLength: 2
                });

    http://stackoverflow.com/questions/17342370/parse-json-in-jquery-autocomplete

    Hope this help

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2016 3:47 PM
  • User-474980206 posted

    when you upgraded jQuery, did you update jqueryui (autocomplete)?

    Tuesday, February 16, 2016 4:00 PM
  • User-1121540557 posted

    I updated to:

    jquery-1.12.0.js

    jquery-ui.js (1.12.0)

    jquery-ui-min.js (1.12.0)

    Because autocomplete references are in ui.js and ui-min.js

    I dropped my jquery-autocomplete.js

    Tuesday, February 16, 2016 4:28 PM
  • User-1121540557 posted

    Now I only get a empty result set back..

    This is wat I've now:

            $("#txDepId").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GetAllDepartments.ashx",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: $("#<%= txDepCode.ClientID %>").val(row.Code),
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            var rows = new Array();
                            for (var i = 0; i < data.length; i++) {
                                rows[i] = {
                                    data: data[i], 
    value: data[i].Code, result: data[i].Name,
    id: data[i].DepId
    }; } return rows; //debugger; }, error: function (result) { alert("Error"); } }); }, minLength: 1 }); 

    and here is the .ashx

            public void ProcessRequest(HttpContext context)
            {
                string queryString = string.Empty;
                if (HttpContext.Current.Request.Params["q"] != null)
                    queryString = HttpContext.Current.Request.Params["q"];
    
                var departments = DAL.GetAllDepartmentsCollection();
                departments = (from c in Departments
                               where c.InUse
                               select new Database.Statistic.Departments
                               {
                                   Code = c.Code,
                                   DepartmentID = c.DepartmentID,
                                   InUse = c.InUse,
                                   EmployeeID = c.EmployeeID,
                                   Name = c.Name + " (" + c.Code + ") "
                               }).ToList();
    
                if (!string.IsNullOrEmpty(queryString))
                {
    
                    Departments = (from c in Departments
                                   where c.Name.ToUpper().Contains(queryString.ToUpper())
                                   select c).ToList();
    
                }
    
                JavaScriptSerializer ser = new JavaScriptSerializer();
                context.Response.Write(ser.Serialize(Departments));
            }

    Tuesday, February 16, 2016 4:33 PM
  • User475983607 posted

    The data property is filling a textbox with a value.  The AJAX request is sending a JSON POST yet the ashx is looking for a "q" form element or querystring not JSON.

    data: $("#<%= txDepCode.ClientID %>").val(row.Code),

    Tuesday, February 16, 2016 7:45 PM
  • User-1121540557 posted

    If I do what you say, I'll get a error "row is undefined"

    This is what I have now...

                if (HttpContext.Current.Request.QueryString.ToString() != null)
                    queryString = HttpContext.Current.Request.QueryString.ToString();
                queryString = queryString.Replace("term=", "");

    And jquery is this:

            $("#txDepId").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "GetAllDepartments.ashx",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: $("#<%= txDepCode.ClientID %>").val(row.Code),
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            var rows = new Array();
                            for (var i = 0; i < data.length; i++) {
                                rows[i] = {
                                    data: data[i], 
                                    value: data[i].Code,
                                    result: data[i].Name, 
                                    id: data[i].DepId
                                };
                            }
                            return rows;
                            //debugger;
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                },
                minLength: 1
            }); 

    Tuesday, February 16, 2016 7:53 PM
  • User475983607 posted

    clubict

    If I do what you say, I'll get a error "row is undefined"

    You have this unknown row.Code property that you're using to set the value of a textbox.

    $("#<%= txDepCode.ClientID %>").val(row.Code)

    The result of the line of code is a literal txDepCode.ClientID=row.Code in the HTTP body.   The ashx logic is not looking for this input field in the request plus the request is marked as JSON but your sending a forms post.

    Please see the following tutorial that explains how to send JSON data to a handler.

    http://codepedia.info/2015/05/generic-handler-ashx-file-post-send-json-data-parameters-in-asp-net-c-jquery/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2016 9:33 PM
  • User-1121540557 posted

    Thank you all for your help!

    Tuesday, February 16, 2016 9:42 PM
  • User-1121540557 posted

    Oke,

    So if I replace $("#<%= txDepCode.ClientID %>").val(row.Code),  with

    data: ("#txDepId").val(),

    all should be fine?

    best regards,

    Mark

    Wednesday, February 17, 2016 7:33 AM
  • User61956409 posted

    Hi clubict,

    error "row is undefined"

    data: $("#<%= txDepCode.ClientID %>").val(row.Code),

    The row object is undefined, so it throws the above error.

    Besides, this is a working sample, you could refer to it.

    http://www.aspsnippets.com/Articles/Using-jQuery-AutoComplete-Plugin-in-ASP.Net.aspx

    Best Regards,

    Fei Han

    Wednesday, February 17, 2016 8:02 AM
  • User-1121540557 posted

    Fei Han,

    That is a plugin, and that is not what I want..I saw that one before..

    Anyway it is solved now..so thanks for your help!

    Wednesday, February 17, 2016 9:39 AM