JQM 1.2.0 a1 - Uncaught error when opening popup from JavaScript

[mrextreme]

I have a single html file, containing all the divs (pages) I will ever need in my mobile app. One of them is

<div data-role="popup" id="taxi-info-popup">
    Blaaa
</div> <!-- taxi-info-popup -->

In the header first I include JQ 1.7.1 and then JQM 1.2.0.a1. Everything works fine. Later in the code I show a Google Map using API v3, with two markers on it. Then I do this:

google.maps.event.addListener( taxiMarker, 'click', function() {
    $( '#taxi-info-popup' ).popup( 'open' );
});

which triggers properly, but it gives me this error: "Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'open' at file:///android_asset/www/lib/jquery.js:19"

[mrextreme]

Update 1: If I call

$( '#taxi-info-popup' ).popup(); // init this one popup only

or as a more generic call

$( 'div[data-role=popup]' ).popup(); // init all popups

in the init function, then the above works. But we shouldn't need this method call to make it work.

[mrextreme]

Update 2: The popup div cannot be at top level, amongst the data-role="page" divs, it needs to be inside the page div - at least in Firefox 14 on Linux and if we are having a simple html markup button to call the popup.

[jjunkin]

Update 2: I just found this out myself. May I suggest putting a note in the popup docs or fixing so that the popup div can be outside of another page? I wasted a lot of time trying to figure out why it wasn't working.

[jaspermdegroot]

@jjunkin - I added info about that to the docs yesterday.

@mrextreme @gabrielschulhof - Can this be closed or still something we need to look into?

[mrextreme]

It depends what do you guys want to do. For sure I would allow the popup container to be outside of a page, because if you have N pages with popups, now you need N containers with N ids and a lot of other repeated code, instead just having one container with one id and one code.

If you decide to go with documenting the behaviour, then noting the info and JS code in my 2nd comment may also be needed - after testing it. That is still an ok solution, and if it works with more than one "top level" popup containers, then it is fine, just make sure people know about this issue and the possible solutions.

[gabrielschulhof]

The problem with placing a popup outside a page div is not with the popup - popups live happily outside page divs. However, there are widgets (such as the listview) which must be the child of a page div in order to work. So, a popup outside of a page cannot currently contain a listview ☹

@uGoMobi not sure whether we should close it. This is more of a heads-up than an outright issue, so it might be good to leave it open. Dunno ...

[jjunkin]

That was my problem, I want to use this as a quick menu with a listview. The issue for me was I spent a lot of time trying to get it all to work outside of the pages thinking I was doing something wrong. Had I understood what you just said (i.e. a note in the docs) then it would have been fine.

My desire was to have multiple pages that I fill with dynamic content (CRUD), and one popup that I could use across all of the windows. AS mrextreme mentions I will now need to put a separate popup div in each page and reference it accordingly. Not a big deal now that I understand.

[gabrielschulhof]

Well, yeah ... the other, perhaps uglier option is to use buttons instead of li ... another intriguing possibility I haven't tried is to place the listview inside a page, have it become enhanced, and then rip it out of the page and stick it inside the popup, which is itself not inside any page.

However, I suspect some of the styling may slip, because selectors are probably set up to expect listview to be a child of the page.

[jaspermdegroot]

Like @gabrielschulhof described the issue is not with popup but the widgets used inside the popup that require to be within a JQM page to work. This goes for listviews as well as page sections like header/footer.
For 1.4 we are planning on making all widgets work outside a page. I close this ticket as duplicate of #4565 which we link to on the roadmap.