CODEWITHSUNDEEP
jquerytypeahead.js
OrElse
OrElse

Reputation: 9979

Cannot set property 'url' of undefined

In the example below i create an instance of the typeahead class

    var ta = $.typeahead({
        input: '.super',
        minLength: 0,
        maxItem: 15,
        order: "asc",
        hint: true,
        href: "",
        searchOnFocus: true,
        display: ["name"],
        template: "{{name}}",
        source: {
            "SearchResults": {
                //ajax: {
                //    url: "/search/" + id,
                //    path: ""
                //}
            }
        },
        callback: {
            onClickAfter: function (node, a, item, event) {
                event.preventDefault;
                debugger;
            }
        },
        debug: true
    });

Later on, and by using the id variable which is obtained via the following method

    $("input").focus(function () { 
        id = $(this).attr("id");
        ta.source.ajax.url = "/search/" + id;
    });

i get the Cannot set property 'url' of undefined since the ta.source.ajax is actually null. How can i fix that?

Simply put, i do not want to create duplicate code for each input of my form

Upvotes: 3

Views: 1174

Answers (4)

yume
yume

Reputation: 11

What about just wrapping the line in a if statement checking if ta.source.ajax exists to prevent it from throwing the property of null error

if(ta.source.ajax){
   ta.source.ajax.url = "/search/" + id;
}

Upvotes: 0

Negi Rox
Negi Rox

Reputation: 3932

Maybe you are using some kind of library of jQuery. but if its loading and initializing your variable properly. and you are getting all other property then it's a small issue. Let's discuss a possible case and understand the problem

    var ta = $.typeahead({
            input: '.super',
            minLength: 0,
            maxItem: 15,
            order: "asc",
            hint: true,
            href: "",
            searchOnFocus: true,
            display: ["name"],
            template: "{{name}}",
            source: {
                "SearchResults": {
                    //ajax: {
                    //    url: "/search/" + id,
                    //    path: ""
                    //}
                }
            },
            callback: {
                onClickAfter: function (node, a, item, event) {
                    event.preventDefault;
                    debugger;
                }
            },
            debug: true
        });

when you assigning anything into the "ta" variable probably you are getting all property. but you are getting an error that "Cannot set property 'URL' of undefined". So it's clearly mentioned property which you re trying to use is URL. logically it should be ajax property but ajax itself not defined in your variable. So you should first define ajax.

var ta = $.typeahead({
            input: '.super',
            minLength: 0,
            maxItem: 15,
            order: "asc",
            hint: true,
            href: "",
            searchOnFocus: true,
            display: ["name"],
            template: "{{name}}",
            source: {
                "SearchResults": {
                    ajax: { // now ajax is defined and you will not get any error. 
                    }
                }
            },
            callback: {
                onClickAfter: function (node, a, item, event) {
                    event.preventDefault;
                    debugger;
                }
            },
            debug: true
        });

Always make sure the variable of JSON is defined previously you can define a property later.

for example

var a={}
a.b.c=10
console.log(a.b.c)// you will get same error.

but if you use something like below.

a.b={}
a.b.c=10 
console.log(a.b.c)// you will not get an error.

hope this will help you.

Upvotes: 0

sauhardnc
sauhardnc

Reputation: 1961

I think you should use ta.source.SearchResults.ajax.url instead of ta.source.ajax.url as suggested by @freedomn

$("input").focus(function () { 
    id = $(this).attr("id");
    ta.source.SearchResults.ajax.url = "/search/" + id;
});

Also, @OrElse about your error, try leaving the properties empty and not commenting them out. Plus try removing double quotes from SearchResults -- 

source: {
    SearchResults: {
        ajax: {
            url: "/search/" + id,
            path: ""
        }
    }
},

Upvotes: 0

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

Configure SearchResults group through options property of the Typeahead instance.

source property of Typeahead instance is generated from options.

ta.options.source.SearchResults.ajax.url = "/search/" + id;

Upvotes: 2

Related Questions