TextWidget Javascript error

[cgossy]

TypeError: newKey[0] is undefined
/site_media/autocomplete_light/text_widget.js
Line 199

This is my form fielddefinition:

self.fields["sis_search"] = forms.CharField(
                                            widget=autocomplete_light.TextWidget('SISSearchAutocomplete',
                                                                                 attrs={'placeholder': _('Type here to search'), }),
                                            label=_("SIS search"),
                                            required=False)

I'm adding the javascript object by myself in the template like this:

$('#id_sis_search').yourlabsAutocomplete({
    url: '/api/v1/med/sis/',
    // Hide after 200ms of mouseout
    hideAfter: 60 * 1000,
    // Choices are elements with data-url attribute in the autocomplete

    // Show the autocomplete after only 1 character in the input.
    minimumCharacters: 2,
    // Override the placeholder attribute in the input:
    placeholder: '{% trans 'Enter Compound name here ...' %}',
    // Append the autocomplete HTML somewhere else:
    appendAutocomplete: $('#search_results'),
    box : $('#search_results'),
.....})

The problem is that the autocomplete js-object is returned in when getting the data attributes using this.data() in text_widget.js

.....
 // Pares data-*
        var data = this.data();
        var dataOverrides = {
            autocompleteOptions: {
                // workaround a display bug
                minimumCharacters: 0,
                getQuery: function() {
                    // Override getQuery since we need the autocomplete to filter
                    // choices based on the word the cursor is on, rather than the full
                    // input value.
                    return this.input.getCursorWord();
                }
            }
        };
        for (var key in data) {
            if (!key) continue;

            if (key.substr(0, 12) == 'autocomplete') {
                var newKey = key.replace('autocomplete', '');
                newKey = newKey.replace(newKey[0], newKey[0].toLowerCase())
                dataOverrides['autocompleteOptions'][newKey] = data[key];
            } else {
                dataOverrides[key] = data[key];
            }
        }
....

Overriding the for loop fixes the problem:

.....
for (var key in data) {
            if (!key) continue;

            if (key.substr(0, 12) == 'autocomplete') {
                var newKey = key.replace('autocomplete', '');               
               if (newKey.length > 0){
                newKey = newKey.replace(newKey[0], newKey[0].toLowerCase())
                dataOverrides['autocompleteOptions'][newKey] = data[key];
                }
            } else {
                dataOverrides[key] = data[key];
            }
        }
...

What am I doing wrong here.

[jpic]

I wonder if newKey is '' after that line var newKey = key.replace('autocomplete', '');. In that case, I'd understand that newKey[0] would be undefined. That could be caused by an attribute named data-autocomplete in the generated input tag.

Could you paste the generated input HTML ?

Also, if my assumption is wrong, could you break if (newKey.length == 0) and figure what the key value is in that case ? Thanks !

[cgossy]

Hi Here's the generated HTML . Yes you're right, I was also looking for data-autocomplete but there is no attribute with this name in my HTML code: (I'm using jQuery v2.1.1)

<div class="col-sm-12 nopadding">
                <input type="text" placeholder="Type here to search" name="sis_search" id="id_sis_search" data-widget-bootstrap="text" data-autocomplete-url="/autocomplete/SISSearchAutocomplete/" data-autocomplete-choice-selector="[data-value]" class="col-sm-9-min autocomplete autocomplete-light-text-widget" autocomplete="off"> 
            </div>

[cgossy]

the Key value is "autocomplete" (after the replacemtent it is an empty string "" ) and it seems to be the autcomplete javascript object (containing all attributes like input, xhrWait, url, .etc...), when I inspect the variable using Firebug

[jpic]

Ok, could you try with branch fix_337 ?

pip uninstall django-autocomplete-light
pip install -e git+https://github.com/yourlabs/django-autocomplete-light.git@fix_337#egg=autocomplete-light

Thanks !

[cgossy]

Thanks for your fast reply Unfortunately this does not solve the problem First: the pach code in both javascript files is written in python :-)

e.g.

if (key.substr(0, 6) != 'widget' or key.length == 6) continue;

should be

if (key.substr(0, 6) != 'widget' || key.length == 6) continue;

beside that, the error (see first comment) remains in file text_widget.js line 198 (this file is unchanged in your patched version)

[jpic]

I just pushed a new commit on that branch and I think it's better. Could you try again please ?

Ooops ! Thanks for your feedback, I've updated the branch. I'm not testing manually, I completely rely on travis functional and unit tests and your feedback due to time constraints ...

Of course, pull requests are always welcome and have chances to speed up the bugfix release process ;)

[cgossy]

sorry I don't have the permission (company policy) to add sourcecode directly into github projects. otherwise I would have done it as pull request

[cgossy]

yes, the error is gone. looks good to me

[jpic]

Ok, that's probably why you don't have your company name in your profile xD

Thanks for your feedback, issuing a release.

Thanks a lot for your time and effort !!

On Wed, Nov 19, 2014 at 1:34 PM, cgossy notifications@github.com wrote:

yes, the error is gone. looks good to me

— Reply to this email directly or view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/337#issuecomment-63633313 .

http://yourlabs.org http://blog.yourlabs.org Customer is king - Le client est roi - El cliente es rey.

[jpic]

Released in 2.0.3, thanks again for your help