Changing pages dynamically in JQuery Mobile Worklight application

In the Creating multi page application with JQuery Mobile entry i talked about how to build a multi-page application with JQuery Mobile, in that i talked about how to switch page using static href's but most of time you would want to change page name dynamically after executing some JavaScript, so i changed my html like this 

<!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=0" />
<title>HelloWorkLightPhoneGap</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/HelloWorkLightPhoneGap.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script>
  var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
  <div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
      <h3>First Page</h3>
    </div>
    <div data-role="content" id="pagePort">
      <a href="javascript:switchToPage2()">Go to second page</a>
    </div>
    <div data-theme="a" data-role="footer">
      <h3>Copyright stuff</h3>
    </div>
  </div>

  <div data-role="page" id="page2" >
    <div data-theme="a" data-role="header">
      <h3>Second Page</h3>
    </div>
    <div data-role="content" id="pagePort">
      <a href="javascript:switchToPage1()">Go to third page</a>
    </div>
    <div data-theme="a" data-role="footer">
      <h3>Copyright stuff</h3>
    </div>
  </div>
   <script src="js/HelloWorkLightPhoneGap.js"></script>
  <script src="js/messages.js"></script>
  <script src="js/auth.js"></script>
</body>
</html>
In this the anchor for change page is changed to point to JavaScript function that looks like this, you can use the jq.mobile.changePage("<pageid>") 

function switchToPage2(){
  jq.mobile.changePage ("#page2");
}

function switchToPage1(){
  jq.mobile.changePage ("#page1");
}

3 comments:

  1. JishnuApril 17, 2012 at 7:54 AM

    Hi Sunil,
    Since we are having all the information in the same page there will be performance issues when the application grows right? Can we do this with multiple HTML pages. When we tried some of worklight JS files were not getting downloaded

    ReplyDelete
  2. Sunil PatilApril 18, 2012 at 11:57 AM

    Hi,

    Take a look at Chaning pages dynamically using JQuery Mobile - use different .htmls for sample on how to split your html into different pages, but i dont like that approach that much. Instead you can think of using this worklight specific approach at Creating multi page application in WorkLight

    ReplyDelete
  3. UnknownJune 8, 2013 at 6:41 AM

    As the number of customers, employees and business partners using mobile devices increases, more and more of your application landscape needs to be available on a variety of mobile platforms. IBM Worklight simplifies your mobility initiatives by providing a flexible platform for the development and management of mobile applications.
    . home page

    ReplyDelete