Skip to content
This repository

Add support for data-role="dialog" #3276

toddparker opened this Issue December 15, 2011 · 13 comments

5 participants

Todd Parker John Bender Scott Jehl Adam Messinger Chetan K Jain
Todd Parker

We're seeing some people try and use data-role="dialog" which isn't a valid role yet in the framework. You make a dialog by linking with data-rel="dialog" on a link but in non-ajax situations, people must be trying this instead. The dialog role results in a blank page because it's not valid today.

For 1.1 we can try and re-work the navigations script to support data-role="dialog" so dialog appearance can work in non-Ajax nav situations. This is mostly the same as the normal page enhancements, but the dialog classes to give it an inset appearance need to be support the normal dialog config attributes for the overlay swatch and such.

Test page:

This shows up blank if you have a role of dialog instead of page.

Adam Messinger

This would be great, since it would make things like the 2-step dialog I'm trying to create easier.

Adam Messinger

I've just found that having step 2's URL as the action attribute value for the form in step 1 of my 2-step dialog works fine, but only if the step 2 page has data-role="dialog" instead of data-role="page" on the outermost div. From the wording of the issue-starting post, I wouldn't expect that to work. Is this intentional?

Todd Parker

That's interesting. I'm beginning to think that this role is supported somewhere in the code, but not intentionally/consistently. This will fix that issue.

Adam Messinger

Good, that means I won't need to find another way to do this. :)

Chetan K Jain

toddparker, I think data-role="dialog" is already supported and seems to be working fine for me (at least with default pop transition on Chrome and it slides up in FF). I did not use data-rel="dialog" here.

Also, refer the Dialogs section,

Test here:

Todd Parker

I just removed the mention of data-role="dialog" until it is properly support. I think that page was causing confusion:

The issue is that the dialog role is supported in multi-page, but not standalone so it's just confusing right now.

Chetan K Jain

hi toddparker, by standalone I assume you mean single-page template? Correct me on this ...
If it is single-page, then check this here:

Can you provide a test case that it fails so I understand better...

Todd Parker

Sure, just try to open a standalone page witha data-role of dialog and you get a blank page:

Chetan K Jain

Ah thanks! Now I see :)

John Bender


Per our discussion some time ago I have it alter the initial page to the page data role if it's a dialog. This at least lets the page render.

Todd Parker

@johnbender - Looks like you fixed the blank page issue. If making this have the inset appearance will be difficult, we can close this and open a new issue for 1.2 to support the inset style.

Scott Jehl scottjehl closed this issue from a commit February 23, 2012
Added support for data-role="dialog". When a dialog is the first "pag…
…e"-type element in the DOM, jQM will enhance it, triggering dialog enhancements as usual for non-ajax environments. Updated the /docs/pages/dialog.html page's role to date-role="dialog" to demonstrate the change. Fixes #3276.
Scott Jehl scottjehl closed this in 95bffbb February 23, 2012
Scott Jehl

@toddparker and @johnbender - I just wanted to follow up and make sure this looked okay for you guys.

Todd Parker

Awesome Scott - that's perfect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.