Popups can not be defined outside the page they're used in. #4565

Closed
AlexHowansky opened this Issue Jun 19, 2012 · 14 comments

Comments

Projects
None yet
10 participants
@AlexHowansky

I'm not sure if this is a bug or the intended behavior, but at the very least it's inconsistent with the way dialogs work and rather limiting in the way it can be used. I'm hoping somebody can chime in and let me know what they think about this issue.

When building dialogs, I can put the dialog DIV outside the page DIV that uses it:

<div data-role="page" id="home">
    <div data-role="header">...</div>
    <div data-role="content">
        <a href="#dialog" data-role="button" data-rel="dialog">dialog</a>
    </div>
    <div data-role="footer">...</div>
</div>
....
<div data-role="dialog" id="dialog">
    ...
</div>

This allows me to pre-load all my static dialogs into a single HTML page, and then pull content DIVs which use those dialogs via AJAX. However, this same technique doesn't work with popups. The following code doesn't display the popup when the button is clicked:

<div data-role="page" id="home">
    <div data-role="header">...</div>
    <div data-role="content">
        <a href="#popup" data-role="button" data-rel="popup">popup</a>
    </div>
    <div data-role="footer">...</div>
</div>
....
<div data-role="popup" id="popup">
    ...
</div>

In order to get the popup to render, I need to put its DIV inside the page DIV that it will be rendered on:

<div data-role="page" id="home">
    <div data-role="popup" id="popup">
        ...
    </div>
    <div data-role="header">...</div>
    <div data-role="content">
        <a href="#popup" data-role="button" data-rel="popup">popup</a>
    </div>
    <div data-role="footer">...</div>
</div>

This has two implications:

  1. I can't have multiple pages use the same popup -- I have to create multiple identical copies of the popup, one for each page.
  2. I can't pull in the DIV for a new page via AJAX unless I also include all popup DIVs that the page might use.

Here are some fiddles for testing:

Dialog defined outside the page - http://jsbin.com/oravud
Popup defined outside the page - http://jsbin.com/axaqit
Popup defined inside the page - http://jsbin.com/uqojic

@ghost ghost assigned gabrielschulhof Jun 19, 2012

@johnbender

This comment has been minimized.

Show comment Hide comment
@johnbender

johnbender Jun 19, 2012

Contributor

@AlexHowansky

I'm under the impression that @gabrielschulhof is either working on this or supports it already. Hopefully he can comment here.

Contributor

johnbender commented Jun 19, 2012

@AlexHowansky

I'm under the impression that @gabrielschulhof is either working on this or supports it already. Hopefully he can comment here.

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Jun 21, 2012

Member

@AlexHowansky

This functionality is certainly something we are going to look into. For multiple reasons that won't be right now so I am going to close this issue as a feature request and I added it here https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

Member

jaspermdegroot commented Jun 21, 2012

@AlexHowansky

This functionality is certainly something we are going to look into. For multiple reasons that won't be right now so I am going to close this issue as a feature request and I added it here https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

@serbanghita

This comment has been minimized.

Show comment Hide comment
@serbanghita

serbanghita Aug 30, 2012

@AlexHowansky meanwhile check https://github.com/serbanghita/jQM-dynamic-popup , it's a small plugin I wrote that wraps around popup() method and allows you to use it the way you want. Tell me if you find it useful.

@ugomobi i'm glad this request was added to the feature requests!

@AlexHowansky meanwhile check https://github.com/serbanghita/jQM-dynamic-popup , it's a small plugin I wrote that wraps around popup() method and allows you to use it the way you want. Tell me if you find it useful.

@ugomobi i'm glad this request was added to the feature requests!

@DzenisevichK

This comment has been minimized.

Show comment Hide comment
@DzenisevichK

DzenisevichK Sep 7, 2012

Will be good to have wrapper around popup to have something like system MessageBox but in html.

$.mobile.showMessage({ // or $.mobile.alert
    caption: "Caption",
    text: "Plain text",  // suggest to use "text-align: center" and "white-space: pre-wrap" for text container
    buttons: [{
        id: "ok",
        text: "OK",
        // other options from button widget
    }],
    theme: ...,
    onClose: function (buttonId) {}
})

Will be good to have wrapper around popup to have something like system MessageBox but in html.

$.mobile.showMessage({ // or $.mobile.alert
    caption: "Caption",
    text: "Plain text",  // suggest to use "text-align: center" and "white-space: pre-wrap" for text container
    buttons: [{
        id: "ok",
        text: "OK",
        // other options from button widget
    }],
    theme: ...,
    onClose: function (buttonId) {}
})
@toddparker

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Sep 26, 2012

Contributor

Opening so we can work on this

Contributor

toddparker commented Sep 26, 2012

Opening so we can work on this

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Oct 23, 2012

Member

Changed milestone from 1.3.0 to 1.4.0 according to the roadmap.

Member

jaspermdegroot commented Oct 23, 2012

Changed milestone from 1.3.0 to 1.4.0 according to the roadmap.

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Dec 16, 2012

Member

I closed #4850 as duplicate.

Added labels "listview" because that is another widget (next to page.sections) that we have to refactor to make it work outside a page.

Update: removed "listview" label because there is a separate ticket for that (#5429).

Member

jaspermdegroot commented Dec 16, 2012

I closed #4850 as duplicate.

Added labels "listview" because that is another widget (next to page.sections) that we have to refactor to make it work outside a page.

Update: removed "listview" label because there is a separate ticket for that (#5429).

@jaspermdegroot jaspermdegroot reopened this Apr 5, 2013

@jaspermdegroot

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Jul 16, 2013

Member

Closing as fixed by commit a8bc1c3

Member

jaspermdegroot commented Jul 16, 2013

Closing as fixed by commit a8bc1c3

@frequent

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Sep 16, 2013

Contributor

@ugomobi: I'm not finding any documentation or examples on creating popups outside pages. Will try if it works and provide an example.

Contributor

frequent commented Sep 16, 2013

@ugomobi: I'm not finding any documentation or examples on creating popups outside pages. Will try if it works and provide an example.

@serbanghita

This comment has been minimized.

Show comment Hide comment
@serbanghita

serbanghita Mar 21, 2014

@frequent maybe the documentation I wrote on https://github.com/serbanghita/jQM-dynamic-popup helps.

@frequent maybe the documentation I wrote on https://github.com/serbanghita/jQM-dynamic-popup helps.

@frequent

This comment has been minimized.

Show comment Hide comment
@frequent

frequent Mar 22, 2014

Contributor

@serbanghita - thx but this works as of JQM 1.4 and I'm happifly using it.

Contributor

frequent commented Mar 22, 2014

@serbanghita - thx but this works as of JQM 1.4 and I'm happifly using it.

@serbanghita

This comment has been minimized.

Show comment Hide comment
@serbanghita

serbanghita Mar 22, 2014

@frequent nice, this is why I like jQuery Mobile

@frequent nice, this is why I like jQuery Mobile

@lloydjcenterofthewest

This comment has been minimized.

Show comment Hide comment
@lloydjcenterofthewest

lloydjcenterofthewest Dec 18, 2014

im confused was this solved? i just tried in JQM 1.4.5 and if i have popups outside of page it doesnt work.

was the https://github.com/serbanghita/jQM-dynamic-popup added to JQM officially?

im confused was this solved? i just tried in JQM 1.4.5 and if i have popups outside of page it doesnt work.

was the https://github.com/serbanghita/jQM-dynamic-popup added to JQM officially?

@Bmint910

This comment has been minimized.

Show comment Hide comment
@Bmint910

Bmint910 May 18, 2015

just want to report that this does indeed work well for JQM 1.4.5 when using a multipage template and even as a MultiHTML...https://stackoverflow.com/questions/30339216/how-to-get-popups-to-be-defined-outside-the-page-theyre-used-in

just want to report that this does indeed work well for JQM 1.4.5 when using a multipage template and even as a MultiHTML...https://stackoverflow.com/questions/30339216/how-to-get-popups-to-be-defined-outside-the-page-theyre-used-in

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment