Showing 'back' button with PhoneGap

Question

I'm developing an iPhone application with HTML5, CSS, and jQuery using PhoneGap. However, there seem to be some problems with either my understanding of PhoneGap or the MWE.

I used following code from codeforest.net:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile Tutorial on Codeforest.net</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>

    <body>

        <!-- Start of first page -->
        <div data-role="page" id="first">

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

            <div data-role="content">
                <p>The content</p>
                <p>View internal page called <a href="#second">second</a></p>
            </div><!-- /content -->

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


        <!-- Start of second page -->
        <div data-role="page" id="second">

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

            <div data-role="content">
                <p>I'm the second content</p>
                <p><a href="#first">Back to first</a></p>   
            </div><!-- /content -->

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

Starting the code in its separate file will result in the wanted behavior (only shows first div with id="first", when clicking on the link the second page is loaded with a back button on top).

I thought I could just use PhoneGap to convert this HTML/CSS/JS example to working iOS application.

The problem I had from the beginning was that I want to have several different .html files, which reference each other. This works, but has the problem that no native back-button is shown in the header.

score 3 · Answer 1 · answered Dec 16 '12 at 22:11

3

Then create a back button of your own.

This part of code will create a back button for you:

<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>

Here's a jsFiddle example: http://jsfiddle.net/Gajotres/ddsrx/. It is using one file with multiple pages but it will also work with a few separate html files.

answered Dec 16 '12 at 22:11

Gajotres

57,309
16
102
130

The actual problem was that the new PhoneGap requires a whitelist of external links, otherwise it won't load the external files (in my case all files from code.jquery.com). – cherrun Dec 17 '12 at 00:07

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

The answer, as posted by the original questioner (as an update to the question--I've moved it to here so it's in an answer):

Problem was that the app couldn't load code from external links. Solution found here: External links or url doesn't work on phonegap

edited May 23 '17 at 12:21

Community

1
1

answered Jul 11 '13 at 15:18

Trott

66,479
23
173
212

Showing 'back' button with PhoneGap

2 Answers2