Home/ Questions/Q 8551643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T14:14:24+00:00

I’ve got a simple website using jQuery mobile. It’s composed of 2 pages, index.php

  • 0

I’ve got a simple website using jQuery mobile. It’s composed of 2 pages, index.php and pageB.php. In pageB.php is the jqm pages’ header. I put a link back to index.php:

<a href="index.php">Retour</a>

In index.php, the page id is welcome

My problem is that if I

  1. Enter the site from domain.com/
  2. Click on a link to pageB.php (ajax-loaded)
  3. Click on the link back to index.php

The event pageshow is not fired again and the content, which I loaded dynamically before, is not present. (Seems to be a new page of type #welcome)

But if I replace the link in pageB.php with a link to index.php#welcome, welcome being the id of the page in index.php, then if I enter the site from pageB.php, the link is inactive.

Update:
Here is simplified code to reproduce the problem:

index.php:

<!DOCTYPE HTML>
<html>
<head>
    <!-- Explicit charset definition -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
    <!-- useful for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Includes javascript & css files required for jquery mobile -->
    <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
    <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
    <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
    <div data-role=page id=welcome>
        <div data-role=header>
        <h1>Index</h1>
        </div>
        <div data-role=content>
        <a href="pageB.php">link to pageB</link>
        <script>
            $('#welcome').bind('pageshow', function(){
                alert('pageshow triggered');
            });
        </script>
    </div>
</div>
</body>
</html>

and pageB.php:

<!DOCTYPE HTML>
<html>
    <head>
    <!-- Explicit charset definition -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>
    <!-- useful for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Includes javascript & css files required for jquery mobile -->
    <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
    <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
    <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />
</head>
<body>
    <div data-role=page id=pageB>
        <div data-role=header>
        <!--<a href="./index.php#welcome" data-icon="arrow-l">Retour</a>-->
        <a href="./index.php" data-icon="arrow-l">Retour</a>
        <h1>PageB</h1>
        </div>
        <div data-role=content>
            nothing
        </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I suggest the following solution:

    First, create a javascript file and call it test.js for example. In this file, include the following code:

    function myfunc(){
    alert('pageshow triggered');
}

$(document).delegate('#welcome', 'pageshow', myfunc);

    Then, include the following code for both your files index.php and pageB.php:

    –index.php:

    <!DOCTYPE HTML>
<html>
    <head>
        <!-- Explicit charset definition -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>

        <!-- useful for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Includes javascript & css files required for jquery mobile -->
        <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
        <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
        <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />

        <!-- INCLUDE YOUR FILE 'test.js' -->
        <script type="text/javascript" src="./test.js"></script>

    </head>

    <body>
        <div data-role="page" id="welcome">
            <div data-role="header">
                <h1>Index</h1>
            </div>

            <div data-role="content">
                <a href="pageB.php">link to pageB</a>
            </div>
        </div>
    </body>
</html>

    –pageB.php:

    <!DOCTYPE HTML>
<html>
    <head>

        <!-- Explicit charset definition -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>

        <!-- useful for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Includes javascript & css files required for jquery mobile -->
        <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
        <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
        <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />

        <!-- INCLUDE YOUR FILE 'test.js' -->
        <script type="text/javascript" src="./test.js"></script>
    </head>

    <body>

        <div data-role="page" id="pageB">
            <div data-role="header">
                <a href="./index.php" data-icon="arrow-l">Retour</a>
                <h1>PageB</h1>
            </div>

            <div data-role="content">nothing</div>  
        </div>
    </body>
</html>

    Another solution would be to group every jQuery Mobile pages in one HTML file:

    <!DOCTYPE HTML>
<html>
    <head>

        <!-- Explicit charset definition -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "/>

        <!-- useful for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Includes javascript & css files required for jquery mobile -->
        <script src="./jquery-mobile/jquery-1.8.1.min.js"></script>
        <script src="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.js"></script>
        <link rel="stylesheet" href="./jquery-mobile/jquery.mobile-1.2.0-beta.1.min.css" />

        <!-- INCLUDE YOUR FILE 'test.js' -->
        <script type="text/javascript" src="./test.js"></script>
    </head>

    <body>

        <!-- PAGE ONE -->
        <div data-role="page" id="welcome">
            <div data-role="header">
                <h1>Index</h1>
            </div>

            <div data-role="content">
                <a href="#pageB">link to pageB</a>
            </div>
        </div>

        <!-- PAGE TWO -->
        <div data-role="page" id="pageB">
            <div data-role="header">
                <a href="#welcome" data-icon="arrow-l">Retour</a>
                <h1>PageB</h1>
            </div>

            <div data-role="content">nothing</div>  
        </div>
    </body>
</html>

    PS: You may change the path / source of the file ‘test.js’ according to your convenience.

    • 0