Dropdown Custom Menu - Cannot read property 'length' of undefined

[SethArchambault]

Using the guide set up here: http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html

With this code in the view:

<div ng-repeat="status_option in status_options">
<select name="select-choice-0" id="select-choice-0" data-native-menu="false">
   <option>{{status_option.name}}</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>
</div>

And this in the controller (in the right place):

    $scope.status_options = '[{"id":"1","name":"Mood","values":[{"id":"1","name":"Happy","order":"0"},{"id":"2","name":"Anxious","order":"0"},{"id":"3","name":"Grumpy","order":"0"}]},{"id":"2","name":"Mental Status","values":[{"id":"4","name":"Oriented x 1","order":"0"},{"id":"5","name":"Oriented x 2","order":"0"},{"id":"6","name":"Oriented x 3","order":"0"}]},{"id":"3","name":"Fall","values":[{"id":"7","name":"Soft","order":"0"},{"id":"8","name":"Hard","order":"0"}]},{"id":"4","name":"Sleep","values":[{"id":"9","name":"Slept Entire Shift","order":"0"},{"id":"10","name":"Napped > 3 Hours","order":"0"},{"id":"11","name":"Napped < 1 Hour","order":"0"},{"id":"12","name":"Active Throughout Shift","order":"0"}]}]';

Yields this error in console:

TypeError: Cannot read property 'length' of undefined

JSFiddle Here: http://jsfiddle.net/doercreator/YzFEG/1/

Thoughts?

Using Chrome V27 on Mac.. thanks!

[tbosch]

Hi, two problems here:

1. Your $scope.status_options is no real JavaScript Array but a String in JSON format. By this, angular will create a new checkbox for every character in the string, which is probably not what you intended. Solution: Remove the starting and ending '.
2. Remove the id attribute from the select box, as otherwise you are creating more than one checkbox with the same id, which jqm does not like :-)
3. There seems is a bug in the adapter that every <option> requires a value attribute. So change <option>{{status_option.name}}</option> to <option value="{{status_option.name}}">{{status_option.name}}</option>.

Together, a working fiddle looks like this: http://jsfiddle.net/YzFEG/2/

I keep this issue open to fix the following in the adapter:

• <option> element does not require a value attribute

Tobias

[SethArchambault]

@tigbro Thanks so much!!

BTW - how did you figure this out so quick? Debugging Javascript libraries confuses the hell out of me, like even knowing that errors out without a value attribute, I can not figure out how to tell that that's the problem.. Wish I could get a bit better at it so I could come provide better info on what's broken..

[tbosch]

Hi,

1. in Chrome Debugger, enable "Pause on all Exceptions".
2. Debug the code you wrote yourself :-)

The fiddle uses a concatenated version ("jquery-mobile-angular-adapter-standalone.js") that includes jQuery, jQuery Mobile, AngularJS and the adapter. I know all of them at least to some extent...

Tobias

[SethArchambault]

Awesome! Thanks for the tip.

[tbosch]

This is working now as expected, see this fiddle: http://jsfiddle.net/YzFEG/6/

Closing this...