KendoUI Autocomplete not working in firefox

Question

My KendoUI Autocomplete example works in Chrome but not in Firefox.

I am able to type in a town name e.g. "watford" and get a result displayed in chrome.

Using FireBug, I can see that I am returning valid JSON result, but get a 'TypeError: e is undefined' error message.

var app = new kendo.mobile.Application(document.body, {

transition: 'slide'
});

$(document).ready(function() {
$("#autoComplete").kendoAutoComplete({
    minLength: 7,
    dataTextField: "title",
    filter: "contains",
    placeholder: "Select town...",
    animation: {
        open: {
            effects: "fadeIn",
            duration: 2000,
            show: true
        }
    },

    close: function(e) {
        var str1 = "Dropdown Item Selected:" + " " + e.item;
        alert(str1);
    },
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://api.geonames.org/wikipediaSearchJSON",
                data: {
                    q: function() {
                        return $("#autoComplete").data("kendoAutoComplete").value();
                    },
                    maxRows: 10,
                    username: "pete"

                }
            }
        },
        schema: {
            data: "geonames"
        }
    }),
    change: function() {
        this.dataSource.read();
    }
    })
});

score 1 · Answer 1 · answered Dec 05 '12 at 20:24

1

The only problem I see is that there is no such thing as e.item for the close event. Use the value method to get the value of the autocomplete.

answered Dec 05 '12 at 20:24

Atanas Korchev

30,562
8
59
93

score 1 · Answer 2 · edited May 23 '17 at 12:03

1

Hello you are requesting json from another domein which is not allowed by the Same origin policy. However by default Chrome does not care about this and this is why it still works.

Since you cannot force Users to change their browsers settings I would suggest you to search for a jsonp endpoint or another service which supports it.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 05 '12 at 21:23

Petur Subev

19,983
3
52
68

score 0 · Answer 3 · edited Jun 27 '13 at 21:46

Got it working in FireFox by adding the line

datatype: "jsonp",

Updated the example fiddle: http://jsfiddle.net/franH/znkV3/15/

var app = new kendo.mobile.Application(document.body, {
  transition: 'slide'
});

$(document).ready(function() {
  $("#autoComplete").kendoAutoComplete({
    minLength: 7,
    dataTextField: "title",
    filter: "contains",
    placeholder: "Select town...",
    animation: {
        open: {
            effects: "fadeIn",
            duration: 2000,
            show: true
        }
    },

    close: function(e) {
        var str1 = "Dropdown Item Selected:" + " " + e.item;
        alert(str1);
    },
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://api.geonames.org/wikipediaSearchJSON",
                dataType: "jsonp",
                data: {
                    q: function() {
                        return $("#autoComplete").data("kendoAutoComplete").value();
                    },
                    maxRows: 10,
                    username: "pete"

                }
            }
        },
        schema: {
            data: "geonames"
        }
    }),
    change: function() {
        this.dataSource.read();
    }
  })
});

KendoUI Autocomplete not working in firefox

3 Answers3