jquery Mobile urls add # tag which breaks forms in Internet Explorer

问题

Hi guys my problem is that I have a jquery mobile site with links like normal e.g

<a href="http://mysite.com/login">Login</a>

Now when they go to that page in firefox etc it goes to

http://mysite.com/#login

Then the browser kicks in and removes the # so it goes to

http://mysite.com/login

The problem is that in Internet Explorer this doesn't happen and that it displays (in this case) the login form but the post doesn't want to work and just goes back to the homepage so

http://mysite.com

I've heard people saying to remove the ajax to fix this but isn't this not fixing the real problem?

Any help would be great.

If I remove the # then magic it all works. Just so you know.

Thanks Richard

I'm using jquery mobile so I'm including these in my header.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

回答1:

just add below jquery code in your layout(master) and you will get your site working in IE.its really working .... This code get form tag. If your view doesn't have form tag then include form tag. and See miracle.

 <script type="text/javascript">
           $(document).ready(function () {
           if ($.browser.msie || $.browser.webkit) {

               $("a").attr("data-ajax", "false");
               $("a").attr("rel", "external");

               var a = $("form");
               if (a != null) {
                   $("form").first().attr("data-ajax", "false");
                   $("form").first().attr("rel", "external");
               }
           }
       });
   </script>

回答2:

When you go to that link in FireFox it should go to http://mysite.com/login

Unless your link looked like this:

<a href="http://mysite.com/#login">Login</a>

Otherwise, it should work fine in all browsers.

回答3:

I was having the same problem that a form I created on a jQuery Mobile page was working in all browsers except internet explorer. Adding the following fixed the issue for me:

    <script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });       
    </script>

回答4:

You can write your <a> tag like this:

<a href="http://mysite.com/login" rel="external">Login</a>

But remember that this will remove the transition effect of jquery mobile, it will redirect on that page.

check that this will solve your problem or not.

回答5:

How bout if you use an absolute path or root relative in your action tag. I'm not sure if you already are using it but for example:

<form action="/folder/anotherfolder/process.php" method="post">
....
</form>

That way hopefully it wouldn't matter that you had a hash tag in your url.

回答6:

This behavior may have something to do with one of several situations in JQM:

1) Redirects and linking to directories "When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced." http://jquerymobile.com/test/docs/pages/page-links.html

2) Ajax loading of forms causes problems in JQM URLs pointing to forms should use rel="external" to prevent Ajax loading of the target page within the current page. I always use rel="external" when linking to forms.

3) Form tags do not recognize rel="external" To prevent Ajax form submission via ajax, use target="_blank" or data-ajax="false" https://github.com/jquery/jquery-mobile/issues/952

Also, from jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html (I can only post two links). "ajaxEnabled (boolean, default: true): jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, url hash listening will be disabled as well, and urls will load as regular http requests."

Using all of the above may help you craft a solution.

回答7:

Instead of using IE, you should install the Windows Phone SDK, which includes a Windows Phone Emulator. I'm curious if you will see the same behavior.

回答8:

Hi Just thinking a little outside the box here - basically we have a problem with ie. All other browsers are fine and the answers coming in are basically to use rel="external" to prevent the ajax thing kicking in. So anyway would the correct answer be just to use a little javascript jquery style to modify all links on the page if it's a windows phone to use this rel="external" as there could be a form anywhere and going through trying to find any links to a page with a form would just be annoying and would affect all browsers. It's a little admitting defeat I know but as yet looks to be the only thing to do.

Is there any take on doing that. Thanks for your input so far. Richard

回答9:

$(document).ready(function () {
        if($.browser.msie || $.browser.webkit) {
            $(\'a\').attr(\'data-ajax\',\'false\');
        }

It's simple and low - tech for me it works but the other one is prb much better.

回答10:

It is old quetion but was fresh for me. So maybe someone also will be looking for answer: try to add to the link (a href...) following: rel="external" or data-ajax="false"

来源：https://stackoverflow.com/questions/9737925/jquery-mobile-urls-add-tag-which-breaks-forms-in-internet-explorer

标签

jquery

internet-explorer

url

mobile

jquery-mobile