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

[thstart]

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.

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

3. 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]

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

[johnbender]

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

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

[johnbender]

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

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

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

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]

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

I was stripped the content out.

[johnbender]

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

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]

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!

[johnbender]

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

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.

[johnbender]

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