Why am I getting this JS error?

Question

I get this JS error:

jquery-1.5.1.min.js:16Uncaught TypeError: Cannot set property '_renderItem' of undefined
d.d.extend._Deferred.f.resolveWithjquery-1.5.1.min.js:16
d.d.extend.readyjquery-1.5.1.min.js:16
d.c.addEventListener.A

and it's from this code for the jquery UI autocomplete plugin in my application.js file:

    .data( "autocomplete" )._renderItem = function( ul, item ) {
         return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( "<a>" + item.topic.name + "</a>" )
           .appendTo( ul );
            };

I get this code whenever I load a page that does NOT have the text field that the autocomplete code is acting on. Why and how can I get rid of this error?

I'd like to note that although I am getting this error, my application is working normally. Should I even be worrying about this error?

Grocer

Answer 1

$(...).data('autocomplete')

is undefined, and you can't set a property of undefined. try:

var obj = $(...).data('autocomplete');
obj && (obj._renderItem = function(){
   ...
});

Mammy

@Blender, because the jQuery selector is returning an empty array. that empty array does not have a .data() function, so the .data function is returning undefined, and you can't set a property of undefined, as cwolves has explained. – Salbu

As the initial question says: "I get this code whenever I load a page that does NOT have the text field that the autocomplete code is acting on" -- thus $(...) is an empty jQuery set and $(...).data('anything') == undefined – Mammy

@nathan -- not quite. Empty jQuery sets still have a .data() function, it'll just always return undefined – Mammy

Well, that's explained by the error. But I get what you mean. – Amari

@cwolves I get this error from your code: Uncaught ReferenceError: Invalid left-hand side in assignment – Grocer

@cwolves, learn something new every day. thanks for the pointer. – Salbu

@Justin - Whoops, sorry about that. You need parens around the assignment, I updated my code. – Mammy

Answer 2

this problem appeared to me when i upgrade the jquery ui from old one to 1.10.0

just change

$('.foo').data("autocomplete")._render...;

To

$('.foo').data("uiAutocomplete")._render...;

source JQueryUI 1.10.0 Autocompleter renderItem problems

Ludly

Answer 3

why not just wrap the autocomplete code in a check to see if that element exists?

something like this:

if ($'#myElementId').length) {
    $('#myElementId').data( "autocomplete" )._renderItem = function( ul, item ) {
         return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( "<a>" + item.topic.name + "</a>" )
           .appendTo( ul );
    };
}

Salbu

Answer 4

I think .data("autocomplete") isn't returning an object, as the error says:

Cannot set property '_renderItem' of undefined

If you are doing this:

$('.foo').data("autocomplete")._render...;

You try breaking it up:

$('.foo').data("autocomplete");
$('.foo')._renderItem = ...;

I've never encountered _renderItem, so I'll look more in to that.

---

Actually, this question seems to explain a problem really similar to your's: Using _renderItem kind of breaks autocomplete field

Amari

_renderItem is part of autocomplete, and he can't break it up because it's setting _renderItem on the result of $('.foo').data('autocomplete'), not on $('.foo') – Mammy

Ahh, good point. You probably know what you're talking about, as I don't tend to use jQuery plugins; it's heavy by itself. – Amari