How to get Anchor Links to work in Jquery Mobile?

Question

Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn\'t good if you have a load of blog posts which have anchor links to the same page

Answer 1

If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.

Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...

$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });

This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.

$(document).ready(function() {
  $("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});

Hope this helps. It is the same solution user700284 offers but in an automated way.

Answer 2

You can add the following code to the end of your page:

 <script type="text/javascript">
     $('a.native-anchor').bind('click', function(ev) {
         var target = $( $(this).attr('href') ).get(0).offsetTop;
         $.mobile.silentScroll(target);
         return false;
     });
 </script>

And add the class "native-anchor" to your anchor links.

It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.

I found this sollution here: jQuery Mobile Anchor Linking

Answer 3

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

Answer 4

Thank you this solution worked for me

<script>
  $(document).ready(function() {
    $("a").each(function() {
      if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
    });
  });
</script>

I replaced # with index.php which is my document root. But, it doesn't work for form button i.e input type="submit"

Answer 5

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
        $('a[href*="#component"]').each(function () {
            // then set data-ajax to false, 
            $(this).attr("data-ajax", false);
            // at this point you can add the class to your target a tags. 
            // You can do it elsewhere but because for this example my 
            // 'a' tags are automatically generated so I just add the class here
            $(this).addClass('in-pagelink');
            // then target the class and bind to a click event 
            $('a.in-pagelink').bind('click', function (ev) {
                // here I redirect the page with window.location.assign
                // as opposed to window.location.href. I find that it works better
                window.location.assign(this.href);
                // then I close my navigation menu
                closeAll();
            });

        });

Answer 6

You could try adding a data-ajax="false" on the anchor tag.

Linking without Ajax

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.

Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html