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

Dialog loads in new page with ajaxEnabled = false #2202

Closed
stoneface opened this Issue Aug 3, 2011 · 23 comments

Comments

Projects
None yet
7 participants
@stoneface

stoneface commented Aug 3, 2011

data-rel="dialog" that previously worked now do not load as a dialog with ajaxEnabled=false, they load in a new page instead. Is this by design? If so, is there a workaround?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Aug 3, 2011

Contributor

If you turn off ajax, the dialog will be loaded as a normal, full page refresh.

Contributor

toddparker commented Aug 3, 2011

If you turn off ajax, the dialog will be loaded as a normal, full page refresh.

@toddparker toddparker closed this Aug 3, 2011

@odedbd

This comment has been minimized.

Show comment
Hide comment
@odedbd

odedbd Aug 21, 2011

@toddparker - why is this bit not a bug but a feature? Is there some technical underlying issue here that makes this impossible?

I am working with an ajaxEnabled=false multipage scenario, where I would like some of the pages to be opened as dialogs, mainly for the looks and feel of the dialog. Why shouldn't that be possible to do? I am using href="#somePageDIvId" in the link.

I just want to note that I finally managed to get the behavior I needed by setting the data-role of the linked-to page div to data-role="dialog" instead of "page", but keeping it all within the link is a cool feature, since I could then have the same page appear with different feel in different contexts.

Thanks!

odedbd commented Aug 21, 2011

@toddparker - why is this bit not a bug but a feature? Is there some technical underlying issue here that makes this impossible?

I am working with an ajaxEnabled=false multipage scenario, where I would like some of the pages to be opened as dialogs, mainly for the looks and feel of the dialog. Why shouldn't that be possible to do? I am using href="#somePageDIvId" in the link.

I just want to note that I finally managed to get the behavior I needed by setting the data-role of the linked-to page div to data-role="dialog" instead of "page", but keeping it all within the link is a cool feature, since I could then have the same page appear with different feel in different contexts.

Thanks!

@odedbd

This comment has been minimized.

Show comment
Hide comment
@odedbd

odedbd Aug 21, 2011

BTW, when using the "fix" I mentioned above (setting data-role="dialog" on linked page), the transitions act funny. The forward transition works on Chrome as "pop", but the close button issues a reverse slide transition. The strange thing is that the close button has a data-transition="pop" with reverse direction in the anchor markup.

Moreover, it seems that trying to override the pop transition by setting the data-transition in the anchor opening the dialog is simply ignored. So it seems that in this case data-transition as well as data-rel are basically ignored. I guess I could patch this by using click event-handlers to manually changePage between the pages, but I really love the possibility of linking using the "#id" href, as it is very clean and elegant.

odedbd commented Aug 21, 2011

BTW, when using the "fix" I mentioned above (setting data-role="dialog" on linked page), the transitions act funny. The forward transition works on Chrome as "pop", but the close button issues a reverse slide transition. The strange thing is that the close button has a data-transition="pop" with reverse direction in the anchor markup.

Moreover, it seems that trying to override the pop transition by setting the data-transition in the anchor opening the dialog is simply ignored. So it seems that in this case data-transition as well as data-rel are basically ignored. I guess I could patch this by using click event-handlers to manually changePage between the pages, but I really love the possibility of linking using the "#id" href, as it is very clean and elegant.

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Sep 19, 2011

Contributor

@stoneface @odedbd

I just checked in a fix for this on the HEAD:

0fbea8f

The fix should allow embedded/internal pages to be loaded as dialogs when clicking on @data-rel="dialog" links.

Related/duplicate issue is 2451.

Contributor

jblas commented Sep 19, 2011

@stoneface @odedbd

I just checked in a fix for this on the HEAD:

0fbea8f

The fix should allow embedded/internal pages to be loaded as dialogs when clicking on @data-rel="dialog" links.

Related/duplicate issue is 2451.

@odedbd

This comment has been minimized.

Show comment
Hide comment
@odedbd

odedbd Sep 20, 2011

@jblas

Thanks! This is a saver for me.

quick question - is it included in the "latest" version? or the "nightly"?

odedbd commented Sep 20, 2011

@jblas

Thanks! This is a saver for me.

quick question - is it included in the "latest" version? or the "nightly"?

@odedbd

This comment has been minimized.

Show comment
Hide comment
@odedbd

odedbd Sep 23, 2011

Answering myself- it was on the latest.

Thanks, this fix came just in time for me!

odedbd commented Sep 23, 2011

Answering myself- it was on the latest.

Thanks, this fix came just in time for me!

@haddnin

This comment has been minimized.

Show comment
Hide comment
@haddnin

haddnin Oct 7, 2011

This fix will NOT allow EXTERNAL pages to be loaded as a dialog if ajaxEnabled: false; Any plans for a fix in the near future?

haddnin commented Oct 7, 2011

This fix will NOT allow EXTERNAL pages to be loaded as a dialog if ajaxEnabled: false; Any plans for a fix in the near future?

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Oct 7, 2011

Contributor

@haddnin

The original problem covered by this issue was fixed. Please file a separate issue and we'll take a look.

To fix your problem, I think we have to modify the init code to look for data-role="dialog" when the document is loaded. Today, we are only looking for data-role="page" leaving all data-role="dialog" divs to be lazily enhanced.

Contributor

jblas commented Oct 7, 2011

@haddnin

The original problem covered by this issue was fixed. Please file a separate issue and we'll take a look.

To fix your problem, I think we have to modify the init code to look for data-role="dialog" when the document is loaded. Today, we are only looking for data-role="page" leaving all data-role="dialog" divs to be lazily enhanced.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 8, 2011

Contributor

@ jblas I think issue #1094 sort of talks about what you suggested above, but that ticket sort of bounces through a few dialog topics. I'd rather close that and open a new ticket like you suggested.

I think @scottjehl may disagree, but I think we should support this with the tweak you described. I've seen enough issues filed against it, that if people want to load a page via a refresh but want it to look like a dialog, so be it.

Contributor

toddparker commented Oct 8, 2011

@ jblas I think issue #1094 sort of talks about what you suggested above, but that ticket sort of bounces through a few dialog topics. I'd rather close that and open a new ticket like you suggested.

I think @scottjehl may disagree, but I think we should support this with the tweak you described. I've seen enough issues filed against it, that if people want to load a page via a refresh but want it to look like a dialog, so be it.

@haddnin

This comment has been minimized.

Show comment
Hide comment
@haddnin

haddnin commented Oct 8, 2011

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Oct 8, 2011

Contributor

@toddparker @jblas @scottjehl

I think this constitutes a feature request, so I've added it to the wiki and closed #2648. If you guys think its important to include before 1.0 I'm open to discussion!

Contributor

johnbender commented Oct 8, 2011

@toddparker @jblas @scottjehl

I think this constitutes a feature request, so I've added it to the wiki and closed #2648. If you guys think its important to include before 1.0 I'm open to discussion!

@joelwreed

This comment has been minimized.

Show comment
Hide comment
@joelwreed

joelwreed Dec 14, 2011

Any chance you could say where you put this in the wiki? I'm very interested in having dialogs not open a new window when i have ajax page loading disabled.

joelwreed commented Dec 14, 2011

Any chance you could say where you put this in the wiki? I'm very interested in having dialogs not open a new window when i have ajax page loading disabled.

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Dec 14, 2011

Contributor

@joelwreed

Second link down under navigation in feature requests (https://github.com/jquery/jquery-mobile/wiki/Feature-Requests).

Contributor

johnbender commented Dec 14, 2011

@joelwreed

Second link down under navigation in feature requests (https://github.com/jquery/jquery-mobile/wiki/Feature-Requests).

@joelwreed

This comment has been minimized.

Show comment
Hide comment
@joelwreed

joelwreed Dec 14, 2011

This fixed the issue for me.

diff --git js/jquery.mobile.navigation.js js/jquery.mobile.navigation.js
index f85a491..181b9c9 100755
--- js/jquery.mobile.navigation.js
+++ js/jquery.mobile.navigation.js
@@ -1322,10 +1322,11 @@
var baseUrl = getClosestBaseUrl( $link ),

                            //get href, if defined, otherwise default to empty hash
  •                           href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl );
    
  •                           href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl ),
    
  •    isTargetDialog = $link.data("rel") === "dialog";
    
                    //if ajax is disabled, exit early
    
  •                   if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
    
  •                   if( !$.mobile.ajaxEnabled && !isTargetDialog && !path.isEmbeddedPage( href ) ){
                            httpCleanup();
                            //use default click handling
                            return;
    

joelwreed commented Dec 14, 2011

This fixed the issue for me.

diff --git js/jquery.mobile.navigation.js js/jquery.mobile.navigation.js
index f85a491..181b9c9 100755
--- js/jquery.mobile.navigation.js
+++ js/jquery.mobile.navigation.js
@@ -1322,10 +1322,11 @@
var baseUrl = getClosestBaseUrl( $link ),

                            //get href, if defined, otherwise default to empty hash
  •                           href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl );
    
  •                           href = path.makeUrlAbsolute( $link.attr( "href" ) || "#", baseUrl ),
    
  •    isTargetDialog = $link.data("rel") === "dialog";
    
                    //if ajax is disabled, exit early
    
  •                   if( !$.mobile.ajaxEnabled && !path.isEmbeddedPage( href ) ){
    
  •                   if( !$.mobile.ajaxEnabled && !isTargetDialog && !path.isEmbeddedPage( href ) ){
                            httpCleanup();
                            //use default click handling
                            return;
    
@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Dec 14, 2011

Contributor

@joelwreed

Is your dialog markup in an external file?

Contributor

jblas commented Dec 14, 2011

@joelwreed

Is your dialog markup in an external file?

@joelwreed

This comment has been minimized.

Show comment
Hide comment
@joelwreed

joelwreed Dec 15, 2011

yes, it was in a separate file.

joelwreed commented Dec 15, 2011

yes, it was in a separate file.

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Dec 15, 2011

Contributor

@jblas

This is the feature request for the initial page load to work as a dialog. It's something we don't currently support but should given that we counsel data-ajax=false in many cases.

Contributor

johnbender commented Dec 15, 2011

@jblas

This is the feature request for the initial page load to work as a dialog. It's something we don't currently support but should given that we counsel data-ajax=false in many cases.

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Dec 15, 2011

Contributor

@johnbender @joelwreed

The reason I inquired about whether or not it was an external file was because this then "works-as-designed". @toddparker closed a couple of bugs that reported this same thing before.

Contributor

jblas commented Dec 15, 2011

@johnbender @joelwreed

The reason I inquired about whether or not it was an external file was because this then "works-as-designed". @toddparker closed a couple of bugs that reported this same thing before.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Dec 15, 2011

Contributor

I just huddled with @scottjehl on this I think the decision is that we should look into supporting data-role="dialog" to support the non-ajax experience but this will require some re-work of navigation. Apparently Scott worked on this earlier but didn't get it working because it's somewhat complex.

As a short-term fix for 1.0.1, I'd recommend that we patch things up so if people use this role, we switch this back to "page" behind the scenes to avoid the blank page issue. We've never told people that data-role="dialog" is valid in the docs (I just search the docs for this and nothing comes up) so this is just a case where people are adding this to their markup in the hope it works.

Contributor

toddparker commented Dec 15, 2011

I just huddled with @scottjehl on this I think the decision is that we should look into supporting data-role="dialog" to support the non-ajax experience but this will require some re-work of navigation. Apparently Scott worked on this earlier but didn't get it working because it's somewhat complex.

As a short-term fix for 1.0.1, I'd recommend that we patch things up so if people use this role, we switch this back to "page" behind the scenes to avoid the blank page issue. We've never told people that data-role="dialog" is valid in the docs (I just search the docs for this and nothing comes up) so this is just a case where people are adding this to their markup in the hope it works.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Dec 15, 2011

Contributor

I just created issue #3275 to add the failsafe and avoid the blank page.

Contributor

toddparker commented Dec 15, 2011

I just created issue #3275 to add the failsafe and avoid the blank page.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Dec 15, 2011

Contributor

Also created issue #3276 for actually supporting this is 1.1 if we can.

Contributor

toddparker commented Dec 15, 2011

Also created issue #3276 for actually supporting this is 1.1 if we can.

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Dec 15, 2011

Contributor

@toddparker

I seem to remember that there was already an issue on this ... the blank page problem is that we only look for data-role="page" elements on startup. The fix I think is as easy as adding data-role="dialog" to the list of things to enhance.

Contributor

jblas commented Dec 15, 2011

@toddparker

I seem to remember that there was already an issue on this ... the blank page problem is that we only look for data-role="page" elements on startup. The fix I think is as easy as adding data-role="dialog" to the list of things to enhance.

@joelwreed

This comment has been minimized.

Show comment
Hide comment
@joelwreed

joelwreed Dec 15, 2011

I don't know exactly why, but to get my rails/jqm site to work with IE8/9 I had to set $.mobile.ajaxEnabled = false; then when I went to click on a dialog link with data-rel= "dialog", it was opening a new window instead of the dialog look/styling, so I threw data-ajax="true" in on the link itself, but that didn't change the behavior at all. Then I started searching the jqm wiki and bug report and changed the jqm code to not skip out on the ajax navigation if the link has data-rel= "dialog" and that fixed my problem.

joelwreed commented Dec 15, 2011

I don't know exactly why, but to get my rails/jqm site to work with IE8/9 I had to set $.mobile.ajaxEnabled = false; then when I went to click on a dialog link with data-rel= "dialog", it was opening a new window instead of the dialog look/styling, so I threw data-ajax="true" in on the link itself, but that didn't change the behavior at all. Then I started searching the jqm wiki and bug report and changed the jqm code to not skip out on the ajax navigation if the link has data-rel= "dialog" and that fixed my problem.

npmcomponent pushed a commit to npmcomponent/cbou-jquery-mobile that referenced this issue Jan 8, 2014

Fix for issue 2451:
����Dialog not working if $.mobile.ajaxEnabled = false����
jquery/jquery-mobile#2451

related/dup bug 2202:

����Dialog loads in new page with ajaxEnabled = false����
jquery/jquery-mobile#2202

- Modified the default click handler to check if the href is for an embedded page before bailing when ajaxEnabled = false. This allows us to navigate to internal/embedded pages/dialogs on the click versus waiting for the accidental hashchange that was the result of the browser's default handling of hash fragments.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment