Adding rel Attribute to All Links for jQuery Mobile App Page Using jQuery

By default, jQuery Mobile framework html links that point to any other web page are loaded via Ajax  and it’s so to enable animated page transitions in your app.

If you want to make your existing  application links to work as it they would work in normal web app, you need to add rel=”external” attribute to all your links. jQuery makes it easy to manipulate any tags within a HTML document. Following are two examples showing how you can use it to add rel attribute.

Linking jQuery Mobile App Pages 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. jQuery Mobile Framework forms need data-ajax=”false” attribute to be submitted without Ajax.

Adding rel=”external” attribute to all the existing link is time consuming. You can achieve that easily using jQuery.

Adding rel=”external” to all links for jQuery Mobile App Page using jQuery

Following code will add rel=”External” attribute to every link in the page.

$(document).ready(function(){
        $("a").attr("rel","external");
});

And if you want to target a specific container or id, say “navigation”, use fiollowing:

$(document).ready(function(){
         $('#navigation a').attr("rel", "external"});
});

Hope that helps.

Cheers.