I have a page containing a select / options element. I also use NativeMenu = false.
When the size of the selection list is small enough to display everything on the screen, there is no problem.
But, when the list is too long and the ui dialog is required, I get the following error when 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 that, the original page will be re-presented, but the Select element will no longer work.
Is there something obvious that I'm missing?
EDIT # 1
I generate 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 result of this is as follows:
<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;"></div>
</div>
</div>
EDIT # 2
I tried creating jsFiddle again, but the results are that it seems to work fine on the fiddle.
http://jsfiddle.net/2E88a/8/
EDIT # 3 ### Other Libraries
jquery, jqueryui, jquery unobtrusive, jquery validate ( asp.net mvc)
modernizr moment.js