Popup dialog not getting focus?
I have two dialogs in a fairly simple PhoneGap app. Both are displayed programmatically in a script using popup('open'). One works fine, the other requires that a button is pressed twice - or at least the user must press in the dialog somewhere and then press the button. Both dialogs are below:
- <div data-role="popup" id="popupShareDlg" data-overlay-theme="a" data-theme="a" style="max-width:250px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Share</h1></div>
<div role="main" class="ui-content">
<h3 class="ui-title">You may need to scroll the list of sharing apps</h3>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-b" data-rel="back" onClick="sharingApp.remindNo();">Got It</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-b" data-rel="back" data-transition="fade">Remind Me Next Time</a>
</div>
</div>
- <div data-role="popup" id="popupEraseDlg" data-overlay-theme="a" style="max-width:280px;">
<div data-role="header" data-theme="a">
<h1>Erase Page?</h1></div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to erase this page?</h3>
<p>This action cannot be undone.</p>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" onClick="drawingApp.clear();">Erase</a>
</div>
</div>
It's the popupEraseDlg that has the odd behaviour. The sharp-eyed may notice that it is 90% the same as the jQuery Mobile popup dialog demo for deleting a page. I have tried forcing the focus by binding to the popupafteropen event and calling focus() but with no apparent improvement. I am using release 1.4.1.
The header lines are below (everything is local since the js files are part of the app):
- <script src="js/jquery.js"></script>
<link href="css/themes/default/jquery.mobile-1.4.1.min.css" rel="stylesheet" />
<script src="js/jquery.mobile-1.4.1.min.js"></script>