Skip to main content

Search and Top Navigation

#8858 closed bug (fixed)

Opened November 27, 2012 10:15AM UTC

Closed November 28, 2012 03:34PM UTC

Last modified November 28, 2012 03:35PM UTC

Autocomplete: Fails when appendTo is detached from the DOM

Reported by: ushi Owned by: ushi
Priority: minor Milestone: 1.10.0
Component: ui.autocomplete Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

I get a "Cannot read property 'element' of undefined" since 1.9 in all of my automcompletes.

Related code:

https://github.com/jquery/jquery-ui/blob/1-9-stable/ui/jquery.ui.autocomplete.js#L-182-L195

So .data('menu') returns undefined. Tell how to i can help.

Attachments (0)
Change History (6)

Changed November 27, 2012 01:12PM UTC by tj.vantoll comment:1

owner: → ushi
status: newpending

Thanks for taking the time to contribute to the jQuery UI project! We're going to need a reduced test case that shows the issue that you're describing.

Also, be sure to test against the git version of both jQuery UI and jQuery to ensure the issue still exists. To get started you can use this boilerplate: http://jsfiddle.net/ZgAqH/ Open the link and click to "Fork" (in the top menu) to get started.

Changed November 28, 2012 09:45AM UTC by ushi comment:2

_comment0: Here is some code the works with 1.8 but not 1.9: \ \ http://jsfiddle.net/D6QCR/7/1354102787987199
status: pendingnew

Here is some code the works with 1.8 but not 1.9:

http://jsfiddle.net/D6QCR/9/

Changed November 28, 2012 01:29PM UTC by tj.vantoll comment:3

_comment0: This is happening both because the you the node passed to {{{appendTo}}} is a detached DOM node. Therefore this line {{{this.document.find( this.options.appendTo || "body" )[ 0 ]}}} in the code block below will end up failing because the {{{appendTo}}} is not in the document. \ \ {{{ \ this.menu = $( "<ul>" ) \ .addClass( "ui-autocomplete" ) \ .appendTo( this.document.find( this.options.appendTo || "body" )[ 0 ] ) \ .menu({ \ // custom key handling for now \ input: $(), \ // disable ARIA support, the live region takes care of that \ role: null \ }) \ .zIndex( this.element.zIndex() + 1 ) \ .hide() \ .data( "ui-menu" ); \ }}} \ \ I'm not sure this is something jQuery UI supports. scott_gonzalez?1354109378110129
status: newopen
summary: Read element from undefinedAutocomplete: Fails when appendTo is detached from the DOM

This is happening because the node passed to

appendTo
is a detached DOM node. Therefore this line
this.document.find( this.options.appendTo || "body" )[ 0 ]
in the code block below will end up failing because the
appendTo
is not in the document.

		this.menu = $( "<ul>" )
			.addClass( "ui-autocomplete" )
			.appendTo( this.document.find( this.options.appendTo || "body" )[ 0 ] )
			.menu({
				// custom key handling for now
				input: $(),
				// disable ARIA support, the live region takes care of that
				role: null
			})
			.zIndex( this.element.zIndex() + 1 )
			.hide()
			.data( "ui-menu" );

I'm not sure this is something jQuery UI supports. scott_gonzalez?

Changed November 28, 2012 01:56PM UTC by ushi comment:4

Hmm, i hope that jQuery UI supports this. Here is my use case

$.ajax('/some.html', {
  success: function(someHtml) {
    var someHtml = $(someHtml);
    var complete = box.find('.complete');

    complete.find('input').autocomplete({
      appendTo: complete,
      source: ['hello', 'world']
    });

    someButton.click(function() {
      someHtml.appendTo('body');
    });
  }
});

This works great with 1.8.

Changed November 28, 2012 03:34PM UTC by Scott González comment:5

resolution: → fixed
status: openclosed

Autocomplete: When appendTo is a jQuery object or a DOM element, don't search against the document. Fixes #8858 - Autocomplete: Fails when appendTo is detached from the DOM.

Changeset: dec844570fae5edf56876b760b9358fde2ecb5e7

Changed November 28, 2012 03:35PM UTC by scottgonzalez comment:6

@ushi I'm not sure if we'll do a 1.9.3 release, so you'll either need to wait for 1.10.0 or implement a workaround in your code. To work around this in 1.9, you can not set appendTo on creation, then immediately after you append to the body, change the appendTo option.