jQuery Mobile using transitions when linking to external html pages. Transition not working

Question

I am using jQuery Mobile, and for each page I am linking to separate html files. Since doing this none of my transitions work when changing pages, for example flip doesn't work: -

<a href="link-here.html" rel="external" class="sb small Grid ui-link" data-transition="flip"></a>

How can i get my transitions to work between pages when they are all in separate html files?

Thanks

Answer 1

Your problem is rel="external", it is causing a full page load without transition effects. If you are not opening a page outside of your domain you should not us it. Same thing happens if you turn ajax off with data-ajax="false".

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.

More about this can be found here: http://jquerymobile.com/test/docs/pages/page-links.html