Link fails to work unless refreshing

Question

I am currently developping a mobile website using JQuery mobile. I am using multiple pages whitin my foobar.html to navigate as follow :

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
    <script src="jquery-js/jquery-1.10.1.js"></script>
    <script src="jquery-js/jquery.mobile-1.3.1.js"></script>
    <title>Foobar</title>
</head>

<body>
    <div data-role="page" id="foo">
        <div data-role="content">
            <a href="#bar" data-role="button">Go to Bar</a>
        </div>
    </div>

    <div data-role="page" id="bar">
        <div data-role="content">
            <p>Bar</p>
        </div>
    </div>
</body>

I load the foobar.html file, click on Go to Bar and it works fine ; however, when I navigate from index.hmtl to foobar.html and test it again, the link fails to work. Refreshing the page solves the problem.

What would explain this behavior and how to fix it?

Gajotres · Accepted Answer · 2013-07-01T12:07:02.027

Explanation

When working with jQuery Mobile and multiple HTML files it is important to understand that when you go from index.html to foobar.html *ONLY* first page will be loaded. Basically jQuery Mobile will strip rest of the page, including HEAD and rest of the BODY content.

So when working with several HTML pages, only first page can have several inner pages, all other HTML pages can have ONLY 1 page. In your case only page #foo was loaded into the DOM, page #bar was discarded.

Also, I have another ARTICLE where is described how jQuery Mobile handles multiple HTML page loading.

Proof of concept

index.html

<!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- META TAGS Declaration -->
            <meta charset="UTF-8">
            <title>TEst</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>              
            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
            <script>
            $(document).on('pagebeforeshow', '#foo', function(){ 
                alert($('#body-test').html());
            });
            </script>           
        </head>

        <body id="body-test">
            <div data-role="page" id="portfolio"  data-add-back-btn="true">             
                <div data-role="content" data-theme='c' >
                    <a href="test.html" data-role="button">Go to Bar</a>
                </div>
            </div><!-- Page Project #1 -->
        </body>     
</html>

test.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
        <script src="jquery-js/jquery-1.10.1.js"></script>
        <script src="jquery-js/jquery.mobile-1.3.1.js"></script>
        <title>Foobar</title>
    </head>

    <body>
        <div data-role="page" id="foo">
            <div data-role="content">
                <a href="#bar" data-role="button">Go to Bar</a>
            </div>
        </div>

        <div data-role="page" id="bar">
            <div data-role="content">
                <p>Bar</p>
            </div>
        </div>
    </body>
</html>

If you run this example it will tell you (alert you) that only page #foo is loaded.

Thaks, for the neat explanation. So, I guess the cleanest way to solve this problem is to create one html file per **page**? — leochab, Jul 01 '13 at 12:16

Link fails to work unless refreshing

1 Answers1

Explanation

Proof of concept

index.html

test.html

Linked