jQuery Mobile + IE Desktop + browser address bar showing incorrect address #3222

Closed
thstart opened this Issue Dec 5, 2011 · 20 comments

Comments

Projects
None yet
3 participants

thstart commented Dec 5, 2011

The following is an issue only with IE Desktop.

  1. If ajax is enabled in jQuery Mobile the site looks great and the buttons look beautiful and have an added visible link
    which makes clicking on buttons in IE to work always as expected, also submit buttons are working fine.

The issue (only with IE) is that when ajax is enabled a hash appears in the browser bar and other side effects too.

One side effect is for example you login on the site and you are on /user/login page and the address bar shows
it up correctly. My server performs a login redirection which goes to the front page but in the browser address bar /user/login stays.

If you click on a link the address bar changes correctly. But if you want to do a server redirection,
in address bar you see /user/login staying. You are in /myinfo but you see /user/login in the address bar.
If you happen to come to myinfo with clicking on other links before, IE adds '#' tag for example /user/login#myinfo.
Coming to myinfo, you fill out the form and hit submit. Because in the browser bar you have /user/login#myinfo,
the form is not submitted because web2py thinks you are in /user/login.

If I don't load jQury Mobile after jQuery I don't get this issue if only jQuery is used.

  1. if ajax is enabled gobally jQuery Mobile has an option to add 'ajax disabled' for the link or submit button,
    but it does not change the behavior with IE - using data-ajax="false

  2. the only way to show the browser bar correctly and eliminate the hash is by disabling the ajax globally.
    Which makes the site not looking good and now you have a different issue. Clicking on buttons and submit with
    IE is not reliable, you have to click on the upper part of the button (?!?).

tec27 commented Dec 5, 2011

#1 happens in most browsers, if you're doing a post back to the same page followed by a 302 redirect. Some browsers will not maintain the hash if the URL you redirect to has a different hash in it (so in this case, you could redirect to /frontpage# instead of /frontpage and this would fix it). Unfortunately however, not all of the browsers will let you overwrite the hash this way.

I personally solved this issue by adding an extra parameter to my redirect query strings, handling the first pagebeforeload event, and doing any special handling (like preventing the page from loading if it was an invalid hash left over from previous pages) there. It works, but its not exactly elegant.

Its important to note that this problem really only comes up when pushState is disabled (as it is for older versions of IE, since they don't support it). This is likely why you are only noticing these issues in IE.

Contributor

johnbender commented Dec 5, 2011

@thstart

We can't know if the response is a redirect with XmlHttpRequest level one (level 2 does though support is spotty), and as a result we can't update the hash properly when a redirect is used for requests (post or get).

You should be able to work around this by disabling ajax for a given form or link, so I'm wondering why this is still an issue given what you've posted in 2). Can you post a simplified example of the issue where ajax is disabled for just the form using http://jsbin.com or http://jsfiddle.net ?

thstart commented Dec 5, 2011

it is a layout used form other pages like index.html - do you mind to post it here?

Contributor

johnbender commented Dec 5, 2011

@thstart

It's possible to setup a multiple pages using jsbin you just have to create each and then reference them based on the jsbin slug. Otherwise pasting here as backtick html code snippets is fine.

Please try and reduce it to the minimum code necessary to reproduce. The extra stuff will make it harder for me to identify if there's an issue.

thstart commented Dec 5, 2011

@johnbender - thank you!

OK I pasted in jsbin html - now how to send you a link? Made an jsfiddle account, pasted in HTML on share I got the link but it does not shows the source code. ;)

thstart commented Dec 5, 2011

@johnbender "You should be able to work around this by disabling ajax for a given form or link"

Actually I would prefer to have an ajax on because the page looks better and when ajax is off I have another issue much more serious - in IE the button does not work properly. I have to click on the upper part of the button in order to work. Submit buttons does not work too when ajax is off. So this is much worse. In version 1,0 jQuery Mobile added (I believe in 1.0) for IE to see a links underscoring the button text which makes IE buttons to work because they are actually a link. Submit works too (I don't know why but it does). This is good enough to me.

So I will go with the ajax on definitely. Only this browser bar address URL's and hashes are causing me troubles.
I will post the full layout.html I am using so if you please look at it and tell me what is wrong. I tested the same page
with a template working without jQuery Mobile - onl jQuery and it works properly. But I like to use the same design for mobile to be used in desktop too. Actually it looks better on desktop no matter it is designed for mobile.

So your help would be greatly appreciated. I spend a lot of time to figure it out looking at jQuery Mobile forums and testing myself but obviously it is not enough.

Regards,
--Constantine

thstart commented Dec 5, 2011

I believe I figured it out. here is my layout which I stripped down to the minimum:
http://jsbin.com/ikirob/3/edit#javascript,html

I am using this layout in order to be able to handle desktop browsers too. Probably you
can spot an issue there.

Thank you in advance,

Regards,
--Constantine

thstart commented Dec 5, 2011

I just added a corrected version here:
http://jsbin.com/ikirob/4/edit

I was stripped the content out.

Contributor

johnbender commented Dec 5, 2011

@thstart

The redirect issue isn't solvable until XmlHttpRequest2 see's better support and a redirect callback is added upstream in jQuery Core. If you are doing redirects on submission turning off ajax is really your only option.

Also I don't see a form, which I assume is added as part of the template data binding, so I can't really help you address your issue. I need the html that's displayed in the browser from the server, but before jquery mobile has had a chance to enhance it.

thstart commented Dec 5, 2011

But automatic redirect works with jQuery. I don't get the address bar issue there.
jQuery Mobile is adding the issue.

Also I don't see a form

So I need to make a pure HTML form and send it ti you?

thstart commented Dec 5, 2011

XmlHttpRequest2 see's better support and a redirect callback is added upstream in jQuery Core

If this the only solution - what I need to do in order to implement it myself?

Thank you!

Contributor

johnbender commented Dec 5, 2011

@thstart

Being that ie 7 doesn't have XmlHttpRequest2 it doesn't really matter in your case. I just need an example page that demonstrates the issue and works on jsbin.com. Alternately stop by our irc channel at #jquerymobile on irc.freenode.net, and ask for help there.

thstart commented Dec 5, 2011

My app will support mobile first, then only latest browsers supporting html5.
Any help implementing XmlHttpRequest2 callbacks with jQuery Mobile
would be appreciated (a link?).

I will send you the example soon - need to make it as a single workable html first.

Contributor

johnbender commented Dec 5, 2011

@thstart

I think your best bet is to check the reponse url on the raw xhr object against the stored request url from the submission to know if there's been a redirect. Otherwise I believe the url should be updated as normal for you.

http://www.w3.org/TR/XMLHttpRequest2/#infrastructure-for-the-send-method

I'm going to close this as an issue, since we can't retain the ajax functionality and deal with redirect urls, it's just a shortcoming of browsers like IE. Post here anyway and I'll take a look to see if anything is misbehaving.

johnbender closed this Dec 5, 2011

thstart commented Dec 5, 2011

Do you think this simple solution will work?
http://www.adequatelygood.com/2010/7/Saner-HTML5-History-Management

Contributor

johnbender commented Dec 5, 2011

@thstart

I'm not at all sure how that relates. :(

thstart commented Dec 5, 2011

I need the html that's displayed in the browser from the server, but before jquery mobile has had a chance to enhance it.
OK I got the source from the browser before it is rendered from jQuery Mobile.

http://jsbin.com/ojamak/3/edit

Plaese note that I hit the button

thstart commented Dec 5, 2011

I needed to correct it
http://jsbin.com/ojamak/4/edit

Contributor

johnbender commented Dec 6, 2011

@thstart

Alright, good start, now we just need to boil it down to the part that's causing the issue. Remove all the custom javascript (web2py.js, mobileinit inclusions) and then try to reproduce the issue. Then post back here.

thstart commented Dec 6, 2011

OK - I see how your process is working, will do it ;)

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