Jquery Mobile templated/persistant header/footer template in Phonegap

Question

based on this question and a few resources on the internet like the jquery mobile documentation I came up with the following code:

<!DOCTYPE html>
<!---index.html--->
<html>

    <head>
        <title>Simply Running</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>


        <body>
        <div data-role="page" id="page">

            <div data-role="header">
                <h1>Header</h1>
            </div><!-- /header -->

            <div role="main" class="ui-content" id="content">
                <p>Loading ...</p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
    </body>


</html>

Then I have some JS:

//index.js
$(document).on('pagecreate', '#page', function(event) {
    loadContent("main.html");
});

function loadContent(location) {
    //Load the html content of the specific side that was requested
    $("#content").load(location);
    //Or to load a specific id from one site:
    //$("#main").load( location + " " + #SPECIFIC);
    return true;
}

function clickedLink() { 
    loadContent($(this).attr('href'));
}

$(document).ready(function() {
    $('#content').on('click', 'a', clickedLink);
});

And I have two pages that only stores the content I want to add.

<!--main.html--->    
<div role="main" class="ui-content">
        <p>At the main page.</p>
        <p><a href="second.html">Go to second one.</a></p>
</div><!-- /content -->

And

<!-- second.html--->
<div role="main" class="ui-content" id="content">
        <p>At second page.</p>
        <p><a href="main.html">Back to first one.</a></p>
</div><!-- /content -->

The first page shows up, but when I click the link you may see how the second page appears but then the screen suddenly gets white. I am new to javaScript, learning for 1 day. I could not find any solution or why the screen gets white.

Greeneco · Accepted Answer · 2015-12-21T16:49:01.283

The solution I have come up with was that I use the following:

<a onclick="loadContent('whatever.html')"></a> //Better use ontouchstart, see Edit

This also means that I just have to use a loadContent function:

function loadContent(location) {
    //Load the html content of the specific side that was requested
    $("#content").load(location);
}

And the line $('#content').on('click', 'a', clickedLink); is not needed anymore what I quite like. :-)

Edit:

onclick="loadContent('whatever.html')"

is no good practice for mobile devices, it is better to use

ontouchstart="loadContent('whatever.html')"

Jquery Mobile templated/persistant header/footer template in Phonegap

1 Answers1