jQuery Mobile + IE Desktop + browser address bar showing incorrect address #3222
Comments
|
#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 I personally solved this issue by adding an extra parameter to my redirect query strings, handling the first 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. |
|
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 ? |
|
it is a layout used form other pages like index.html - do you mind to post it here? |
|
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. |
|
@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. ;) |
|
@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. 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, |
|
I believe I figured it out. here is my layout which I stripped down to the minimum: I am using this layout in order to be able to handle desktop browsers too. Probably you Thank you in advance, Regards, |
|
I just added a corrected version here: I was stripped the content out. |
|
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. |
|
But automatic redirect works with jQuery. I don't get the address bar issue there.
So I need to make a pure HTML form and send it ti you? |
If this the only solution - what I need to do in order to implement it myself? Thank you! |
|
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. |
|
My app will support mobile first, then only latest browsers supporting html5. I will send you the example soon - need to make it as a single workable html first. |
|
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. |
|
Do you think this simple solution will work? |
|
I'm not at all sure how that relates. :( |
http://jsbin.com/ojamak/3/edit Plaese note that I hit the button |
|
I needed to correct it |
|
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. |
|
OK - I see how your process is working, will do it ;) |
The following is an issue only with IE Desktop.
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.
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
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 (?!?).
The text was updated successfully, but these errors were encountered: