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 (ie href="#specs").

Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?

I only need a solution for anchor links on the same page (ie: href="#specs").

thanks

Answer 1

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

Answer 2

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.