0

I've come across a problem whereby including jQuery (V1.10.2 - Or any version), causes the CSS styles of a second page not to load when accessed via a link on the first page, if all pages in question are cached. To illustrate the problem, I've created a very basic example. Both pages use identical jQuery, jQuery Mobile and jQuery Mobile CSS files, and both are cached by the manifest file (match.manifest), which is referenced by the first page.

The Situation

The first page loads, instructs the browser to cache the first (index.html) and second (index2.html) pages, and then adds a link on the first page that goes to the second. If you click this link, you are taken to the second page, but the CSS styles of the second page are not applied. If you then refresh, they are applied.

In addition, if you load the first page, use the link, and then go back without refreshing, the CSS styles of the second page, are actually applied to the first page!

I have created a simple example, available here: http://cyphergaming.co.uk/dunk/isosec/samples/appcache/

The Code

In case it helps, here is the code used

match.manifest:

CACHE MANIFEST

#update 29/08/13 09:50

CACHE:

# HTML Pages
index.html
index2.html

# CSS
css/jquery.mobile-1.3.2.min.css

# JavaScript
js/jquery-1.10.2.min.js
js/jquery.mobile-1.3.2.min.js

# Images
images/ajax-loader.gif
css/images/ajax-loader.gif

index.html:

<!DOCTYPE html>
<html manifest="match.manifest">
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
        <script src="js/jquery-1.10.2.min.js"></script>

        <!-- With the below line in this file only, the problem occurs. Without it, it does not. -->
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="homePage">
            <p>First Page.</p>
            <a href="index2.html">Go to second page.</a>
        </div>
    </body>
</html>

index2.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
        <style>
            *
            {
                background-color: #ABABAB;
            }
        </style>
    </head>
    <body>
        <div data-role="page" id="homePage">
            <p>Second Page (This should have a grey background, and will if you refresh (Or exlude the jQuery file from the first page).</p>
        </div>
    </body>
</html>

Please feel free to test the link I have provided, or to use the code to test yourself, and please don't hesitate to as any questions.

Thanks for looking, your help is really appreciated!

Duncan McArdle
  • 501
  • 5
  • 14
  • When you click the link to the second page the first page just appends the second page to itself. Do you have to change the DIv id's? they are both set to `homePage` – AfromanJ Oct 29 '13 at 11:11
  • Add styles or any custom js inside page div. jQM loads pages via ajax, so it neglects `` and fetches first div with `data-role=page`. When you refresh the page, it loads it normally so styles are applied. – Omar Oct 29 '13 at 11:16
  • @JamieRead I have changed the second pages ID but this appears to have no effect, what you say about it appending the second page may be at least contributing to the problem however, is there a way to stop this happening and instead have it function like a normal HTML link? – Duncan McArdle Oct 29 '13 at 11:17
  • @Omar Unfortunately this isn't really an option, the app this is actually for spans multiple files, multiple pages and multiple sub-directories, so it becomes imperative that all pages have their own files! – Duncan McArdle Oct 29 '13 at 11:18
  • each pages has its own css? custom js? if so, you either include them inside `data-role=page` div or turn off ajax to navigate between pages. – Omar Oct 29 '13 at 11:20
  • http://stackoverflow.com/a/19270205/1771795 fyi. – Omar Oct 29 '13 at 11:35

2 Answers2

1

Here is a duplicate answer on how to disable the Ajax links when using JQuery Mobile

Example:

<a href="index2.html" data-ajax="false" class="ui-link">Go to second page.</a>

The problem is that the first page only Ajax calls in the second pages HTML, which does not include the second pages styling.

You could also include a global style sheet with a class that will add style to the second page.

EDIT:

data-ajax="false" is the correct property to use instead of rel="external" which is for linking away from your site.

Community
  • 1
  • 1
AfromanJ
  • 3,922
  • 3
  • 17
  • 33
  • Your answer is close, and prompted me to look up and find that the better option is data-ajax=false, based on the following jQuery Mobile documentation: "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" As your answer effectively gave me the resources to find the answer, I'd ask that you update it to reflect this, at which point I'll accept it, rather than answer it myself :). Thank you very much! – Duncan McArdle Oct 29 '13 at 11:29
0

You should be using $.mobile.changePage to navigate between pages.

Dave S
  • 849
  • 7
  • 7