CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-autocomplete
Carl Weis
Carl Weis

Reputation: 7082

Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML

I'm using the following code to render my jQuery UI autocomplete items as HTML. The items render correctly in the autocomplete control, but I keep getting this javascript error and can't move past it.

Firefox Could not convert JavaScript argument

Chrome Cannot set property '_renderItem' of undefined

  donor.GetFriends(function (response) {
    // setup message to friends search autocomplete
    all_friends = [];
    if (response) {
        for (var i = 0; i < response.all.length - 1; i++) {                
                all_friends.push({
                    "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
                        response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
                        response.all[i].firstname + " " + response.all[i].lastname + "</strong>",

                    "value":response.all[i].firstname + " " + response.all[i].lastname,
                    "id":response.all[i].user_id});
            }
        }        

    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

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

Not sure why it is throwing this error, or what I have to do to get past it...Any help is appreciated.

Upvotes: 74

Views: 76792

Answers (7)

Kahin
Kahin

Reputation: 475

I know I'm late with my answer but if people in the future still don't get 

 .data( "ui-autocomplete-item", item )

to work then try this insted

$(document).ready(function(){
 $('#search-id').autocomplete({
  source:"search.php",
  minLength:1,       
  create: function () {
   $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      return $('<li>')
        .append( "<a>" + item.value + ' | ' + item.label + "</a>" )
        .appendTo(ul);
    };
  }
 })
});

It worked for me and I was having problem with the login funktion.. I could not login because it said 

Uncaught TypeError: Cannot set property '_renderItem' of undefined

Hope this does help someone :)

/kahin

Upvotes: 10

nextgentech
nextgentech

Reputation: 3728

Since I just joined and can't comment on drcforbin's post above, I guess I have to add my own answer.

drcforbin is correct, although it is really a different problem than the one that the OP had. Anyone coming to this thread now is probably facing this issue due to the new version of jQuery UI just released. Certain naming conventions relating to autocomplete were deprecated in jQuery UI in v1.9 and have been completely removed in v1.10 (see http://jqueryui.com/upgrade-guide/1.10/#autocomplete).

What is confusing, however, is that they only mention the transition from the item.autocomplete data tag to ui-autocomplete-item, but the autocomplete data tag has also been renamed to ui-autocomplete. And it's even more confusing because the demos are still using the old syntax (and thus are broken).

The following is what needs to change in the _renderItem function for jQuery UI 1.10.0 in the Custom Data demo here: http://jqueryui.com/autocomplete/#custom-data

Original code:

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

Fixed code:

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Note the changes for both autocomplete and item.autocomplete. I've verified that this works in my own projects.

Upvotes: 206

Johnie Karr
Johnie Karr

Reputation: 2822

Posting for the sake of any person who stumbles across this post.

This error will also manifest itself if you don't put the .autocomplete inside the document ready event.

The code below will fail:

<script type="text/javascript">
    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

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

while the code below will work:

<script type="text/javascript">
    $(function(){
        $('#msg-to').autocomplete({
            source:all_friends,
            select:function (event, ui) {               
                // set the id of the user to send a message to
                mail_message_to_id = ui.item.id;
            }

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

Upvotes: 3

Cyril N.
Cyril N.

Reputation: 39919

And now, with jQuery-2.0.0, it's the name of your new module, but replacing the "." (dot) by the "-" (dash) :

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
    '_renderMenu': function (ul, items) {
        // some work here
    }
});

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}

Upvotes: 5

AutoCiudad
AutoCiudad

Reputation: 779

I'm using jquery 1.10.2 and it work using:

.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Upvotes: 6

Michael Angstadt
Michael Angstadt

Reputation: 76

Depending on the version of jquery ui you're using it will either be "autocomplete" or "ui-autocomplete", I made this update to the combobox plugin to fix the problem (~ln 78-85)

var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
     autoComplete = input.data("autocomplete");

autoComplete._renderItem = function(ul, item) {

...

Upvotes: 1

drcforbin
drcforbin

Reputation: 260

I ran into the same problem...seems in later versions, it has to be .data("ui-autocomplete") instead of .data("autocomplete")

Upvotes: 26

Related Questions