CODEWITHSUNDEEP
javascriptjquerymobile
Metal Wing
Metal Wing

Reputation: 1175

jQuery Mobile Web App - clicking link to another page - page flashes content then blanks

This is an issue I ran into before and I am still unsure as to why it happens.

The page in question is - http://nexrem.com/dragontimer/testdir/mobile/index.html

When you hit the Select server button, the page flashes the content that should be there, then its blank! One way I know this can be fixed is by adding data-ajax="false" to the link; however if I do that, then I run into another problem: on iPhone if I add the page to my home screen and then run it - click the 'Select Server' - opens up a browser instead of staying within the web app.

My goal is for users to be able to add the page to their home screen, with no url bar and just run all pages from within. It seems that having <meta name="apple-mobile-web-app-capable" content="yes" /> and the data-ajax="false" together isn't working out.

So basically 2 things:

Thank You

Edit: Here is the code for index.html and servers.html

index.html - http://pastebin.com/Qh5s7QRp

servers.html - http://pastebin.com/Exv2MJrS

Upvotes: 0

Views: 2113

Answers (1)

Littm
Littm

Reputation: 4947

In your file index.html, include rel="external" instead of data-ajax="false" inside the definition of your link Select server.

So, you should have this instead:

<a href="servers.html" data-role="button" data-theme="c" rel="external">Select server</a>

You may also need to replace every data-ajax="false", that you included in the <a> links of both your HTML files index.html and servers.html, with rel="external".

Check the online doc for more information about rel="external" at http://jquerymobile.com/test/docs/pages/page-links.html :

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.

Hope this helps.

Upvotes: 1

Related Questions