Error when calling popup("open")
I have a very simple single page JQM on Cordova(PhoneGap) app I'm "prototyping".
In my index.html, I have this basic layout:
<head>
<script type="text/javascript" src="script/cordova-2.0.0.js"></script>
<script type="text/javascript" src="script/jquery-1.8.0.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<div id="homePage" data-role="page"> {content for this div} </div>
<div id="nestedPage1" data-role="page"> {content for this div} </div>
{3 more <div>'s here...}
<div id="mainMenu" data--role="popup"> {html taken from the Popup demo page here... </div>
</body>
In my javascript, inside of the function I call on the "deviceready" event, I have this code:
console.debug("# listening for menubutton.");
document.addEventListener("menubutton", onMenuButton, false);
and the onMenuButton looks like:
function onMenuButton() {
console.debug("# inside onMenuButton()");
$('#mainMenu').popup("open");
}
When I run this code inside of an Android emulator, I'm getting the following:
08-21 00:17:02.966: D/DroidGap(336): onMessage(onCreateOptionsMenu,com.android.internal.view.menu.MenuBuilder@4063a958)
08-21 00:17:02.966: D/DroidGap(336): onMessage(onPrepareOptionsMenu,com.android.internal.view.menu.MenuBuilder@4063a958)
08-21 00:17:03.056: D/CordovaWebView(336): KeyDown has been triggered on the view
08-21 00:17:03.056: D/CordovaWebView(336): >>> loadUrlNow()
08-21 00:17:03.076: D/CordovaLog(336): # inside onMenuButton()
08-21 00:17:03.137: D/CordovaLog(336): Error: cannot call methods on popup prior to initialization; attempted to call method 'open'
08-21 00:17:03.146: D/CordovaLog(336): file:///android_asset/www/script/jquery-1.8.0.js: Line 477 : Error: cannot call methods on popup prior to initialization; attempted to call method 'open'
08-21 00:17:03.146: E/Web Console(336): Error: cannot call methods on popup prior to initialization; attempted to call method 'open' at file:///android_asset/www/script/jquery-1.8.0.js:477
My question is this:
Is having a <div> of a popup at the same level as the "page" div's allowed?
My "homePage" is displayed in the Android Emulator prior to my pressing the menu button - so I'm pretty sure everything is initialized. And I know the JQM and Cordova are both loaded as 2 of my UI elements "initialize" and change visually, letting me know AJAX calls and callbacks have completed.
Thanks!
Robert