ui.selectmenu throwing 'this.newelement.0' is null or not an object

Question

I am attempting to implement the ui.selectmenu from here http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/, but have it placed inside of a jQuery dialog. Not sure if that is where the conflict lies.

The HTML markup is:

<div id="selModeBox" title="Mode selection Form">
    <label for="mode">Select modes:</label>
    <select id="mode" name="mode">
        <option value="v0" selected="selected">-- Make a Selection --</option>
        <option value="v1">Mode 1.</option>
        <option value="v2">Mode 2.</option>
    </select>
</div>

The Javascript to implement:

jQuery(document).ready(function() {
    $('#selModeBox').dialog({
        modal: true
    });
    $('#selModeBox select').selectmenu();

    $('#tabs').tabs();
});​

The javascript error appears on load an refers to this line of the ui.selectmenu javascript code (line 108):

this.element.click(function() {
    this._refreshValue();
}).focus(function() {
    this.newelement[0].focus();
});​

Has anyone experienced something similar or have any ideas on remedying this?

Answer 1

Its possible that jQuery 1.8 is causing problems as its not tested yet, please see https://github.com/fnagel/jquery-ui/issues/261

Please open an new issue if the problem persists in 1.7.x (please see https://github.com/fnagel/jquery-ui/issues/61)