Dialog loads in new page with ajaxEnabled = false #2202

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

Projects

None yet

7 participants

@stoneface

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
Contributor

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

@toddparker toddparker closed this Aug 3, 2011
@odedbd
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
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
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
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
odedbd commented Sep 23, 2011

Answering myself- it was on the latest.

Thanks, this fix came just in time for me!

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

@johnbender
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!

@joelwreed

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
Contributor

@joelwreed

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

@joelwreed

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
Contributor
jblas commented Dec 14, 2011

@joelwreed

Is your dialog markup in an external file?

@joelwreed

yes, it was in a separate file.

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

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

@toddparker
Contributor

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

@toddparker
Contributor

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

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

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 npmcomponent pushed a commit to npmcomponent/cbou-jquery-mobile that referenced this issue Jan 8, 2014
@jblas jblas 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.
0fbea8f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment