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"> </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.
EDIT #3 ### Other Libraries
jquery, jqueryui, jquery unobtrusive, jquery validate (standard asp.net mvc setup) plus modernizr and moment.js