How to show a jQuery page inside a popover?

jquery, jquery-mobile, popover

Solution

If you just need content inside a popover, you should use the upcoming popup widget as @Phill Pafford mentions.

If you want full pages inside a popover you can try multiview, which I'm almost done developing.

Here is one of my test pages which also has a popover (top right).

Popovers are panels, which use the JQM pageContainer changePage option to enable panel navigation and integration into the JQM and browser history.

I have not done a popover only version of the plugin so currently you would have to set up your page like this:

<div data-role="page" id="YOUR_ID" data-wrapper="true"> 

    <div data-role="panel" data-id="my_main_panel_id" data-panel="main">

         <div data-role="page" id="page_A1" data-show="first">

            <div data-role="header" data-position="fixed">
               <h1>Local Header</h1>
               <div data-role="controlgroup" data-type="horizontal" class="iconposSwitcher-div">
                    <a href="#" data-transition="pop" data-role="button" data-panel="pop_one" data-icon="info" data-iconpos="left" class="toggle_popover">pop1</a>
               </div>
            </div>
            <div data-role="content"></div>
         </div>
      </div>

      <div data-role="panel" data-id="pop_one" data-panel="popover" data-triangle="top" class="popover1">
           <div data-role="page" id="page_D1" data-show="first">
               <div data-role="header" data-position="fixed" data-theme="a">
                   <h1>Pop</h1>
               </div> 
               <div data-role="content"></div>
            </div>
    <div data-role="page" id="page_D2">
                <div data-role="header" data-position="fixed" data-theme="a">
                   <h1>Pop internal page</h1>
                </div>
                <div data-role="content"></div>
           </div>
       </div>
   </div>

So to use popovers, you will need to

- add data-wrapper="true" to your page to init the plugin

- use a fullwidth main background panel

- panels need a role = data-role="panel", a type data-panel="main|mid|menu|popover" and a data-id data-id="your_panel_name"

- one page on each panel needs data-show="first", without it your panels will be blank

- you can add as many popover panels as you want inside your wrapper page

- you can add as many nested pages inside your popovers as you want

- nested pages don't need to be "on board" when you load the page. You can pull them in like JQM through links or changePage calls.

to pull a page in or link to and from a page inside a panel, changePage like this:

$.mobile.changePage('#pop_two', {transition: 'slide', pageContainer: $('div:jqmData(id="your_panel_name")') });

or using links with data-panel specified:

<a href="#pop_two" data-panel="your_panel_name">Button</a>

- there is no need to include all popover pages at first page load. You can pull them in like regular JQM and they will be removed again once the user leaves or the popover closes.

- to toggle a popover you need a toggle button with class of toggle_popover and data-panel="your_panel_name" to tell the plugin which popover to open.

- on smartphones your popovers will be fullscreen pages

The plugin still has some bugs and requires a custom JQM version with 4 small tweaks (most important adding pageContainer to the JQM history), but other than that it's working ok.

Problem

I'm using jQuery Mobile to develop an iPad app. I want to have a toolbar with a button that displays a popover when clicked. After some search I found this jQuery popover implementation. It works fine but without any styling for the header or content. I then made some tweaks and decided to set only a content which would be a regular jQuery page like this: ``` <div id="popover-add-project" data-role="page" data-url="popover-add-project"> <div data-role="header" data-position="fixed"> <h1>Add New Project</h1> </div><!-- /header --> <div data-role="content"> <p>project form to be inserted here</p> </div> </div> ``` The problem is that it displays an empty popover. A simplified code is here and can be executed by opening index.html on a webkit browser (I tested only on Safari and Chrome) and clicking Add button. jquery.popover.js contains popover related code. app.js creates the popover for the Add button. Any help would be appreciated. Thanks.

Original source