CODEWITHSUNDEEP
jqueryajaxjquery-mobile
Adi
Adi

Reputation: 4022

jQuery mobile ajax navigation

I am just getting my teeth into jQuery mobile (and so far it looks really interesting).

I read a great tutorial on elated.com, one part of which was about page transitions/ajax navigation. This looks great (on my iPhone) but if you look at the source it's all flat html on the same page.

What i want/need is to point to another url and for ther same effect to happen if possible.

I have been reading here info about data-url but I cant seem to get anything to work.

Here is some very rough example code that obviosuly doesnt work:

<p><a href="#" data-url="test.html" data-transition="flip">My test link</a></p>

What is the right code? Is it even possible?

Upvotes: 2

Views: 3813

Answers (3)

elzaer
elzaer

Reputation: 729

add the tag: data-ajax="false" to anything you want to expliticly load a new page for, eg:

<a href="xyz.html" data-ajax="false">Link</a>

Alternatively you can use the native anchor target tag

Upvotes: 0

Sindre
Sindre

Reputation: 3930

From http://jquerymobile.com/test/docs/pages/page-links.html

Default link behavior: Ajax

To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.

If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.

Upvotes: 0

naugtur
naugtur

Reputation: 16915

try <a href="test.html">link</a>

seems too obvious? ;)

data-url is an attribute that a page div has, when it's been loaded. All pages are AJAX-loaded to the current DOM and they get this attribute to be easy found.

Upvotes: 2

Related Questions