jquerymobile large custom select list error on select

Viewed 607

I have a page, which contains a select/options element. I am also using NativeMenu = false.

When the size of the select list is small enough for it to render all onscreen, there are no problems.

But, when the list is too long, and a ui dialog is required, I get the following error on selecting an item from the list

TypeError: fromPage.data(...) is undefined
fromPage.data( "mobile-page" )._trigger( "hide", null, { nextPage: toPage } );
jqueryMobile-1.3.2.js (line 4061)

After which, the original page is re-presented, but the Select element is no longer operational.

Is there anything obvious I am missing?

EDIT #1

I'm generating the selectbox with the following ASP.Net MVC code:

<div style="width:55%;float:left;" id="itemMenuArea">
    <select name="itemFilterMenu" id="itemFilterMenu" data-theme="c" data-corners="false" data-mini="true">
        <option value="-1">All Items</option>
        @foreach(var choice in (IEnumerable<SelectListItem>) ViewBag.EventList){
            <option value="@choice.Value">@choice.Text</option>
        }
    </select>
</div>

The output of that looks like this:

<div id="itemMenuArea" style="width:55%;float:left;">
    <div class="ui-select">
        <a href="#" role="button" id="itemFilterMenu-button" aria-haspopup="true" aria-owns="itemFilterMenu-menu" data-corners="false" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="c" data-mini="true" class="ui-btn ui-shadow ui-mini ui-btn-icon-right ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text"><span>All Items</span></span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span></a>

        <select data-mini="true" data-corners="false" data-theme="c" id="itemFilterMenu" name="itemFilterMenu" tabindex="-1">
            <option value="-1">All Items</option>
            <option value="21">BJA</option>
            <option value="8">BonAppetit</option>
            <option value="3">Community Ed</option>
            <option value="15">donations</option>
            <option value="22">Fall Reg</option>
            <option value="2">Food Service</option>
            <option value="18">Group A</option>
            <option value="20">Group B</option>
            <option value="23">Group c</option>
            <option value="24">Group c</option>
            <option value="25">Group c</option>
            <option value="26">Group D</option>
            <option value="27">Group E</option>
            <option value="28">Group F</option>
            <option value="29">Group G</option>
            <option value="30">Group H</option>
            <option value="31">Group I</option>
            <option value="32">Group J</option>
            <option value="33">Group K</option>
            <option value="34">Group L</option>
            <option value="35">Group M</option>
            <option value="36">Group N</option>
            <option value="37">Group O</option>
            <option value="38">Group P</option>
            <option value="39">Group Q</option>
            <option value="40">Group R</option>
            <option value="6">Hastings Test</option>
            <option value="5">Lakeville Test</option>
            <option value="12">Leroy Test</option>
            <option value="13">QIS Test</option>
            <option value="9">St Cloud Test</option>
            <option value="7">Texas Test</option>
            <option value="10">WinSNAP Test</option>
        </select>
        <div style="display: none;"><!-- placeholder for itemFilterMenu-listbox --></div>
    </div>
</div>

EDIT #2

I tried again to build a jsFiddle, but the results are that it seems to work just fine in the fiddle.

http://jsfiddle.net/2E88a/8/

EDIT #3 ### Other Libraries

jquery, jqueryui, jquery unobtrusive, jquery validate (standard asp.net mvc setup) plus modernizr and moment.js

0 Answers
Related