Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"this.source is not a function" if HTML5 autofocus attribute is set on autocomplete field #185

Open
mcbsys opened this issue Nov 5, 2012 · 0 comments

Comments

@mcbsys
Copy link

mcbsys commented Nov 5, 2012

Had a strange issue with rails3-jquery-autocomplete 1.0.9, jquery-rails 2.1.2, and Firefox 16.0.2 under Ubuntu.

My form has two autocomplete fields. When the form first loaded, after I typed two characters in the first field, nothing happened. If I moved to the second field (which uses the same source) and typed two characters, the drop-down appeared. If I then moved back to the first field, it worked.

If I opened Firebug and tried to see / trap errors, it worked right away on the first field. Finally I was able to see an error by closing Firebug and opening only the Developer Toolbar Web Console: line 6148 of jquery-ui.js was throwing "this.source is not a function". That's the last line of this function in the native jQuery autocomplete code:

_search: function( value ) {
    this.pending++;
    this.element.addClass( "ui-autocomplete-loading" );

    this.source( { term: value }, this._response() );
},

There was no stack trace but I think source is supposed to contain the data source, which rails3-jquery-autocomplete initializes here. Why wasn't it getting initialized?

On a whim, I removed the HTML "autofocus" attribute from the autocomplete field. Note that this is separate from the autoFocus option of the jQeury autocomplete widget. I'm talking about the HTML5 attribute that causes the field to receive focus when the form first loads. Once I removed that attribute, the autocomplete worked as soon as I starting typing in the first field.

I think what is going on is that the HTML5 attribute focuses the field early in the page load, so it doesn't fire the rails3-jquery-autocomplete [focus event](https://github.com/crowdint/rails3-jquery-autocomplete/blob/master/lib/assets/javascripts/autocomplete-rails-uncompressed.js#L21, which is what calls the code to initialize the autocomplete.

Maybe the cleanest solution would be for rails3-jquery-autocomplete to have a $(document).ready event that checks whether an autocomplete field already has focus, and if so, initializes autocomplete on that field. In the meantime, I found that adding the following to my Javascript works around the problem:

// If autocomplete field has an HTML5 autofocus attribute, re-focus after
// the form load completes. This causes rails3-jquery-autocomplete to 
// initialize the autocomplete, including setting up the JSON data source.
$(document).ready(function(){
  $('input[data-autocomplete][autofocus]').focus();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant