Popups common to all pages in jQuery Mobile site

Question

I am trying to make a site using jQuery Mobile. It consists of many pages in HTML files, some of which have only one page, and some of which have several pages (using their multi-page feature ).

The site is going to have some popups for notifications, and they are going to look the same on all pages. I am implementing the popups using their new popup feature which seems designed for this purpose. I can easily implement this by putting copies of the popups on each of the pages but this will create a lot of redundant code which may be hard to maintain. I can probably make my server insert the code for me in the proper places but that seems complex and inefficient.

I tried putting the popups outside of the pages and they do not work reliably (you can see an example here ).

I tried dynamically generating them by using a templating system (the one built into underscore.js) but that looks like it may cause problems – I will have to destroy every popup when it is closed to avoid memory leaks.

I am not sure if this is a bug in the popup widget, which seems likely since the popup widget is only in an alpha version of jQuery Mobile.

Does anyone here have any ideas as to how to make a site with many pages in several html files, with a few popups that are common to all of the pages?

Answer 1

I've seen your request on jQuery Mobile github, and posted a solution that I'm using on my web applications. Check http://ghita.org/jquery/dynamic-mobile-popup it's a small plugin that allows you to have dynamic popups, it let you focus on the content of the popup and the events .

Include the plugin (has 1.8kb ), and then call:

$.dynamicPopup({content: 'This is the dynamic content of the popup.'});

content - can be a string or a jQuery html object.

Check https://github.com/serbanghita/jQM-dynamic-popup for the full list of options, some of which are inherited from jQuery's mobile popup() function.

This problem was a show stopper for me because I have dynamic webpages and I don't care of manually injecting HTML content for the popup() to be active. Hope you find it helpful.

Answer 2

you would have to try and set it up like the jqm loader, which also resides outside of the div.page (otherwise you would have one loader per page inside the dom), so i think the right approach would be to not include the popup within a page, but outside the div.page.

as jqm will only pull in div.pages and nothing before/after you should be able to include a generic popover on every page and only have it in the dom once. not sure this is working though outside div.page.

Answer 3

May be very late to the party, but may be useful for someone coming across.

Now you can use Global Popups if you are using latest JQM (I am using JQM 1.4.2). You just need to declare the popup directly under body div, out side all data-role pages.

Better go through this JQM documentation