CODEWITHSUNDEEP
javascriptcordovajquery-mobile
AdamCooper86
AdamCooper86

Reputation: 4237

pagecontainer #change - JqueryMobile - Phonegap

I have a phonegap/jquerymobile app that I can't seem to get pagecontainer #change to work for. I have tried the most up to date syntax I could find, but seem to be missing something. 

function goToCards() {
    console.log('got to goToCards');
    $(':mobile-pagecontainer').pagecontainer('change', '#cardsPage');
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>BibHub Mobile</title>
  </head>
  <body>
    <div class="app" data-role="page" id="loginPage">
      <div data-role="header">
        <h1>Biphub</h1>
      </div>
      <div data-role="content">
        <a href="#" data-role="button" onclick="goToCards()"> go to cards</a>
      </div>
    </div>
    <div class="app" data-role="page" id="cardsPage">
      <div data-role="header">
        <h1>Biphub</h1>
        <h2>Your UID is <span id="uidSpan"></span></h2>
      </div>
      <div data-role="content">
        <p>Your card stack is currently empty. Way to go!</p>
      </div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      app.initialize();
    </script>
  </body>
</html>

When I run the app in xcode I successfully log 'got to goToCards'. However, there is no page change or any error. A normal non-js function link works to transition the page. Any ideas?

Upvotes: 0

Views: 268

Answers (1)

ezanker
ezanker

Reputation: 24738

The pagecontainer widget and its methods were introduced in jQuery Mobile version 1.4. You appear to be using a really old version (1.0). Can you upgrade both jQuery and jQuery Mobile versions?

If not, you need to use $.mobile.changePage : API DOC

Upvotes: 2

Related Questions