New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
toddparker opened this Issue Dec 15, 2011 · 13 comments

Comments

Projects
None yet
5 participants
@toddparker
Contributor

toddparker commented Dec 15, 2011

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:
http://jsbin.com/uyinaf/2

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

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Dec 15, 2011

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

adammessinger commented Dec 15, 2011

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

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Dec 15, 2011

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?

adammessinger commented Dec 15, 2011

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?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Dec 16, 2011

Contributor

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.

Contributor

toddparker commented Dec 16, 2011

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.

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Dec 16, 2011

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

adammessinger commented Dec 16, 2011

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

@chetankjain

This comment has been minimized.

Show comment
Hide comment
@chetankjain

chetankjain Dec 17, 2011

Contributor

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, http://jquerymobile.com/demos/1.0/docs/api/data-attributes.html

Test here: http://dl.dropbox.com/u/53242546/dialog.html

Contributor

chetankjain commented Dec 17, 2011

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, http://jquerymobile.com/demos/1.0/docs/api/data-attributes.html

Test here: http://dl.dropbox.com/u/53242546/dialog.html

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Dec 19, 2011

Contributor

I just removed the mention of data-role="dialog" until it is properly support. I think that page was causing confusion:
http://jquerymobile.com/test/docs/api/data-attributes.html

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

Contributor

toddparker commented Dec 19, 2011

I just removed the mention of data-role="dialog" until it is properly support. I think that page was causing confusion:
http://jquerymobile.com/test/docs/api/data-attributes.html

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

@chetankjain

This comment has been minimized.

Show comment
Hide comment
@chetankjain

chetankjain Dec 19, 2011

Contributor

hi toddparker, by standalone I assume you mean single-page template? Correct me on this ...
If it is single-page, then check this here: http://dl.dropbox.com/u/53242546/page1.html

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

Contributor

chetankjain commented Dec 19, 2011

hi toddparker, by standalone I assume you mean single-page template? Correct me on this ...
If it is single-page, then check this here: http://dl.dropbox.com/u/53242546/page1.html

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Dec 19, 2011

Contributor

Sure, just try to open a standalone page witha data-role of dialog and you get a blank page:
http://jsbin.com/uyinaf/2

Contributor

toddparker commented Dec 19, 2011

Sure, just try to open a standalone page witha data-role of dialog and you get a blank page:
http://jsbin.com/uyinaf/2

@chetankjain

This comment has been minimized.

Show comment
Hide comment
@chetankjain

chetankjain Dec 19, 2011

Contributor

Ah thanks! Now I see :)

Contributor

chetankjain commented Dec 19, 2011

Ah thanks! Now I see :)

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Feb 3, 2012

Contributor

@toddparker

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.

Contributor

johnbender commented Feb 3, 2012

@toddparker

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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 22, 2012

Contributor

@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.

Contributor

toddparker commented Feb 22, 2012

@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.

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 24, 2012

Contributor

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

Contributor

scottjehl commented Feb 24, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 24, 2012

Contributor

Awesome Scott - that's perfect.

Contributor

toddparker commented Feb 24, 2012

Awesome Scott - that's perfect.

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