CODEWITHSUNDEEP
jqueryjquery-mobile
Bill Jones
Bill Jones

Reputation: 701

JQuery Mobile pageShow and pageCreate events not firing

I have a JQuery Mobile app. On the first page of the app, I'm trying to set some field values on load if they've been previously set. In an attempt to do this, I currently have the following:

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/resources/css/themes/mobile/core.css" />
    <link rel="stylesheet" href="/resources/css/themes/mobile/app.css" />

    <script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>  
    <script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>     
    <script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>
  </head>
  <body>
    <div id="loginPage" data-role="page">
      <div data-role="header" data-position="fixed"><h1>AppName</h1></div>
      <div data-role="content">
        <label for="usernameTextBox">Username</label>
        <input id="usernameTextBox" type="text" autocomplete="false" /><br />

        <label for="passwordTextBox">Password</label>
        <input id="passwordTextBox" type="password" /><br />

        <div class="ui-grid-a"><div class="ui-block-a">
          <a href="#" id="loginButton" data-role="button" class="dd-btn-a" onclick="return loginButton_Click();">Login</a></div>
        </div>
      </div>
    </div>
  </body>
</html>

app.ui.js

$("#loginPage").on("pagecreate", function () {
    alert("here 1");
    $.mobile.hidePageLoadingMsg();
});

$("#loginPage").on("pageshow", function () {
    alert("here 2");
    $.mobile.hidePageLoadingMsg();

    var us = false;
    var ps = false;

    var u = window.localStorage.getItem("username");
    if ((u != null) && (u != undefined) && (u.length > 0)) {
        if (u != "undefined") {
            $("#usernameTextBox").val(u);
            us = true;
        }
    }
    alert(u);

    var p = window.localStorage.getItem("password");
    if ((p != null) && (p != undefined) && (p.length > 0)) {
        if (p != "undefined") {
            $("#passwordTextBox").val(p);
            ps = true;
        }
    }

    if ((us == true) && (ps == true)) {
        loginButton_Click();
    }
});

Oddly, none of my "alert" boxes are fired. In addition, I do not see any errors in the console window. What am I doing wrong?

Upvotes: 2

Views: 10381

Answers (2)

Jaya Mayu
Jaya Mayu

Reputation: 17247

Import your app.ui-1.0.js before the </body> closing body tag. Then it'll work. Reason is that your js file will be executed before loading the DOM as well as the jQuery files. So it won't fire.

Always make sure to import in following order

  1. jQuery framework
  2. jQuery Mobile framework
  3. jquery plugins
  4. Your custom js files

As Gajotres mentioned wrap your code inside following snippet as a good practice.

$(document).on("pagecreate", "#loginPage", function () { 
// your code here
});

Something as below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/resources/css/themes/mobile/core.css" />
    <link rel="stylesheet" href="/resources/css/themes/mobile/app.css" />

    <script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>   
    <script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>
  </head>
  <body>
    <div id="loginPage" data-role="page">
      <div data-role="header" data-position="fixed"><h1>AppName</h1></div>
      <div data-role="content">
        <label for="usernameTextBox">Username</label>
        <input id="usernameTextBox" type="text" autocomplete="false" /><br />

        <label for="passwordTextBox">Password</label>
        <input id="passwordTextBox" type="password" /><br />

        <div class="ui-grid-a"><div class="ui-block-a">
          <a href="#" id="loginButton" data-role="button" class="dd-btn-a" onclick="return loginButton_Click();">Login</a></div>
        </div>
      </div>
    </div>
        <script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>   
  </body>
</html>

Upvotes: 4

Gajotres
Gajotres

Reputation: 57309

Change your code to this:

$(document).on("pagecreate", "#loginPage", function () {
    alert("here 1");
    $.mobile.hidePageLoadingMsg();
});

$(document).on("pageshow", "#loginPage", function () {
    alert("here 2");

Because you are binding your page events before HTML is loaded into the DOM. And move this line:

<script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>

below jQuery mobile script tag.

Upvotes: 2

Related Questions