Monday, 7 March 2011

JQuery Mobile: Switching Pages: new page does not get style

When clicking on any relatively linked page the new page is loaded and displayed but it does not contain any of the formatting love jquery mobile normally applies. When visiting any of these pages by themselves they all render properly but the same issue exists where you cant navigate between them.

The problem: In jQuery Mobile Alpha 2.0 all pages in the same root will not receive the proper style when linking to each other.

Example:
site/mobile/index.html <- contains a link to news.
site/mobile/news.html <- news will not receive style because index and news are in the same directory.

There are three solutions to fix this(for the time being before they release the next alpha).

Solution 1:
Use jquery 1.4.3 instead of 1.4.4. you lose icon in your headers but it's not a complete loss if you dont need them.

Solution 2:
place all your sub pages from your index in sub folders or in a sub folder. You cant use a flat site system but all the pages will style properly.
Example:
site/mobile/news/index.html

Solution 3:
add a "?" at the end of the hyperlink. This tells the jquery mobile that it needs to render a new page but it could be the same page so have it style properly. (if your hyperlinks already have GET variables in your URLs then you are all set.)
Example:
site/mobile/news.html?

No comments:

Post a Comment