CODEWITHSUNDEEP
jqueryjquery-mobile
Janko
Janko

Reputation: 51

Jquery mobile: pageinit event not fired

Can somebody out there help me out with this code please? This might be something stupid to fix but I've been now stuck with this since hours! pageinit event doesn't fire. The only way to get it fired is to move the script inisde the body, just before the closing tag, but this weird structure I haven't found in any official documentation, and I suspect is wrong ! I am testing on Samsung phone emulator (avd).

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
       $( document ).delegate("#aboutPage", "pageinit", function () {
                alert('ok');
            alert($('#homePage').text());
        });

</script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <title>Test Mobile Application</title>
  </head>
  <body>
    <div data-role="popup" id="popupBasic">
      <p>-....</p>
    </div>
    <!-- Begin Homepage -->
    <section id="homePage" data-role="page" data-theme="a">
      <header data-role="header" data-position="fixed">
        <h1>Header</h1>
      </header>
      <div class="content" data-role="content">
        <p>Homepage</p>
        <a onclick="javascript:alert($('#homePage').text());" data-role="button">aaaaa</a>
        <p>
          <a href="#aboutPage">Go to About Page</a>
        </p>
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
      </div>
      <footer data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </footer>
    </section>
    <!-- End Homepage -->
    <!-- Begin About Page -->
    <section id="aboutPage" data-role="page" data-theme="b">
      <header data-role="header" data-position="fixed">
        <h1>Header</h1>
      </header>
      <div class="content" data-role="content">
        <p>This is About Page</p>
        <p>
          <a href="#portfolioPage">Go to Portfolio Page</a>
        </p>
      </div>
      <footer data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </footer>
    </section>
    <!-- End About page -->
    <!-- Begin Portfolio Page -->
    <section id="portfolioPage" data-role="page" data-theme="a">
      <header data-role="header" data-position="fixed" data-theme="d">
        <h1>Header</h1>
      </header>
      <div class="content" data-role="content" data-theme="c">
        <p>This is Portfolio Page</p>
        <p>
          <a href="#homePage">Go back to Homepage</a>
        </p>
      </div>
      <footer data-role="footer" data-position="fixed" data-theme="d">
        <h1>Footer</h1>
      </footer>
    </section>
    <!-- End Portfolio page -->
  </body>
</html>

Upvotes: 1

Views: 3057

Answers (2)

user2044276
user2044276

Reputation: 1

After some big search I found that the pageinit event doesn't fired due Ajax. Then in the link where you call next page add data-ajax="false" Second Page

Upvotes: 0

peterm
peterm

Reputation: 92785

Your code works just fine. pageinit() is being called exactly once when your About page is being fetched either by clicking on aaaa button or by link Go to About Page.

Couple of things though:

First Link jquery.mobile first then use it

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    //Your code as of right now
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Should be

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    //Your code goes here
</script>

Second Since you're using jquery 1.8.2 you may consider switch from delegate() to on()

   $(document).on("pageinit", "#aboutPage", function () {
        alert('ok');
        alert($('#homePage').text());
    });

Upvotes: 2

Related Questions