JQuery Autocomplete won't load remote values

Question

Okay, so JQuery's autocomplete widget is driving me nutz!
I have tried numerous ways of loading the widget. I am currently getting the following:

Error: jQuery15105511000803127266_1353087819681 was not called - parsererror

and the Response value (from firebug) appears to be System.string[] though I'm not sure if it's an a string who's value is System.string[] or an actual system.string[] object.

Am I just being stupid, or am I missing something (please be kind in your answer to that last question...)?

My javascript is:

$("#clientName").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/supplier/apSupplierSearch/",
            data: { searchAPName: clientName.value },
            dataType: "json",
            type: "POST",
            success: function (data) {
                //response(data);
                response($.map(data, function (item) {
                    return {
                        label: item.Name,
                        value: item.Name
                    }
                }))
            }
        }); // ajax
    }, // function [{
    scroll: true,
    scrollHeight: 600,
    minLength: 4
});

My WebMethod is:

[WebMethod]
public string[] apSupplierSearch(string searchAPName)
{
    IList<int> selectedPropertyIDs = new List<int>();
    string currentRole = UserServices.GetCurrentRole();
    Property currentProperty = UserServices.GetCurrentPropety();
    List<ApSupplier> suppliers = ApSupplierQueries.GetApSuppliers(searchAPName, selectedPropertyIDs, currentRole, currentProperty);
    List<string> supplierList = new List<string>();
    foreach (ApSupplier supplier in suppliers)
    {
        supplierList.Add(supplier.Name);
    }
    return supplierList.ToArray();
}

score 2 · Answer 1 · answered Nov 16 '12 at 18:14

I'm not too familiar with C# but you probably want to print the supplier list rather than return it. When doing AJAX, you acutally have to output data, not just return it from a method (but that could be my misunderstanding of the language).

Secondly, you need to use a library to create a JSON string from the array created from toArray(). Otherwise, jQuery doesn't recognize the response as JSON and won't parse it.

Abhishek J · Accepted Answer · 2012-11-16T20:02:57.203

The error which you get seems to be some sort of cross domain issue when you specify dataType:"jsonp" instead of JSON. And that makes me wonder why you get this error since you have dataType:"json".

I have a similar piece of code which seemed to be working fine for me.And the method in my service is of type "GET".Here it is:

    var availabletags=new Array();

    CallService2("GET", "ServiceUrl",
        function (data) {
            if (data) {
            $.each(data, function (index, item) {
                    availabletags.push(item);
                });
        },
        function (result) {
            alert('Service call failed: ' + result.status + '' + result.statusText);
        });

    function CallService2(method, serviceUrl, successHandler, errorHandler) {
    $.ajax({
        type: method,
        url: serviceUrl,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successHandler,
        error: errorHandler
        });
    }

    $(function() {  
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

Call this code just before the page gets loaded. Let me know if it helps.All the best....

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Interestingly enough. It looks like a JQuery JSONP error, but you are using json. Are you sure that the error correspond to the code you attached. See related problem: parsererror after jQuery.ajax request with jsonp content type

edited May 23 '17 at 11:43

Community

1
1

answered Nov 16 '12 at 23:23

Night Warrier

381
4
12

JQuery Autocomplete won't load remote values

3 Answers3