Search jQuery

jQuery Forum

Error when calling popup("open")

in jQuery Mobile • 9 months ago

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

Replies(8)

haga0054

Re: Error when calling popup("open")

9 months ago

JQuery mobile 1.2.0 is compatible with JQuery 1.7.2 NOT 1.8.0.
You don't even include any of the JQM css...
You have data--role="popup". Extra - is included.
If you are using JQuery Mobile you should use JQuery... Don't add event listener Example: $(document).on('vclick', '#menubutton', function(e){...});
If it's not initialized you probably want the event 'pageinit' and not device ready. This way you can ensure the page is initialized before making any calls.
It's recommended to use classes instead of ID's in JQM due to the AJAX navigation. It can be very frustrating as you can have two id's on different pages clashing.
I would read through the documentation for JQM and JQuery before going much further.

rbatemanmi

Re: Error when calling popup("open")

9 months ago

Haga0054,

I tried both JQuery 1.7.2 as well as 1.8.0 and received the same error in both. The source of the error in JQuery 1.8.0 appears the be the same as in 1.7.2.

My application is Mobile based, thus I'm using JQM and Cordova. As I commented above, I'm using JQM 1.2.0 and using some of the "new" features of 1.2.0 - hence my use of the new "popup" feature of JQM.

If this is the incorrect place to post an issue or problem I noticed in 1.2.0, please let me know and I'll repost elsewhere.

Robert

haga0054

Re: Error when calling popup("open")

9 months ago

No this is the right place. I was just pointing out a lot of possible issues. There are a lot of things I saw wrong here, and combined they could be causing problems. As I said in your <head> you don't even include the JQM css file. You kind of need that if you want to use JQM styling.

rbatemanmi

Re: Error when calling popup("open")

9 months ago

This evening, I removed my references to JQuery 1.8.0 and reverted to 1.7.2. The error I received above is still present.

Tracing thru the JQM 1.2.0 Alpha 1 code, I find the following code is the only code in JQuery 1.7.2 or JQM 1.2.0 Alpha 1 that contains the substring "cannot call methods on " - the beginning of the error I'm getting.

$.widget.bridge = function( name, object ) {
    var fullName = object.prototype.widgetFullName;
    $.fn[ name ] = function( options ) {
        var isMethodCall = typeof options === "string",
            args = slice.call( arguments, 1 ),
            returnValue = this;

        // allow multiple hashes to be passed on init
        options = !isMethodCall && args.length ?
            $.widget.extend.apply( null, [ options ].concat(args) ) :
            options;

        if ( isMethodCall ) {
            this.each(function() {
                var instance = $.data( this, fullName );
                if ( !instance ) {
                    return $.error( "cannot call methods on " + name + " prior to initialization; " +
                        "attempted to call method '" + options + "'" ); // <-- Error thrown here
                }
                if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
                    return $.error( "no such method '" + options + "' for " + name + " widget instance" );
                }
                var methodValue = instance[ options ].apply( instance, args );
                if ( methodValue !== instance && methodValue !== undefined ) {
                    returnValue = methodValue && methodValue.jquery ?
                        returnValue.pushStack( methodValue.get() ) :
                        methodValue;
                    return false;
                }
            });
        } else {
            this.each(function() {
                var instance = $.data( this, fullName );
                if ( instance ) {
                    instance.option( options || {} )._init();
                } else {
                    new object( options, this );
                }
            });
        }

        return returnValue;
    };
};

I've highlighted the line of code that appears to be throwing the error.

Going back to my code from my original post, it appears my call to $('#mainMenu').popup("open"); is the culprit.

Question: According to the popup documentation located at here, I find the following text under the heading:

Calling the popup plugin

This plugin will autoinitialize on any page that contains a div with the attribute data-role="popup". However, if needed you can directly call the popup plugin on any selector, just like any jQuery plugin and programmatically work with the popup options, methods, and events API:
 
$('#myPopupDiv').popup();

The text continues to indicate I can call $('#myPopupDiv').popup("open"); to programatically "open" my popup.

Based upon the "error" I'm getting, it appears there is some kind of "initialization" necessary. But that seems to conflict with the documentation (unless I'm reading the documentation incorrectly.) The #mainMenu div in my code is themed (see code in my first post) the way I wish it to be. If I'm understanding the "error", it appears I can't rely on the options in the <div> itself when I programatically call open(). Am I reading things incorrectly?

Robert

haga0054

Re: Error when calling popup("open")

9 months ago

Again, everything you are saying is correct. You should just call the $("#mypopup").popup("open"); The problem is it isn't initialized. Without an example (perhaps post one to jsfiddle.net) it's hard to help.

My guess is the following could be causing this:

The event you are using to add the listener is incorrect. Try using pageinit as I suggested.
The popup you are calling is NOT on the page you are calling it from. Make sure it's within the page you are calling it on.
You are calling it before you get to the page. Is it supposed to popup first or something? If so call it on pagebeforeshow.

nic0g11

Re: Error when calling popup("open")

8 months ago

I had the same problem and i solved my problem, that i inserted my popup div in the page div.

maybe you try to integrate the popupdiv in the homepageDiv or the nestedPage1 div so that hte code looks like this

<div id="homePage" data-role="page">
{content for this div}
<div id="mainMenu" data--role="popup"> {html from the Popup demo}</div>
</div>
<div id="nestedPage1" data-role="page"> {content for this div} </div>
{3 more <div>'s here...}

</body>

Dennis va..

Re: Error when calling popup("open")

8 months ago

If you want a popup to work outside of a data-role="page" div, you'll have to add all the classes (which JQM adds) manually to the popup div. That's how I got it working in a project.

sebastian..

Re: Error when calling popup("open")

5 months ago

For me the following worked for creating and displaying a dynamic popup:

$("<div data-role='popup'>My Popup</div>")
.popup()
.popup("open");

This way you don't need to all the JQM classes manually.

Top Reply

Response title

Attachments

jQuery Forum

Error when calling popup("open")

Replies(8)

Re: Error when calling popup("open")

Re: Error when calling popup("open")

Re: Error when calling popup("open")

Re: Error when calling popup("open")

Calling the popup plugin

Re: Error when calling popup("open")

Re: Error when calling popup("open")

Re: Error when calling popup("open")

Re: Error when calling popup("open")

Statistics

Tags

Actions

Related Posts