1

I'm using jQuery Mobile and rely much on it's history state feature so I would like to use the jQuery way to redirect user to another "page". This is the latest method from their latest documentation.

p/s: The reason I prefer jQuery navigation method is because of the hashchange/history and each transition can be different instead of one global transition.

Note: jQuery.mobile.changePage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use the pagecontainer widget's change() method instead.

But I tried and it's not working. Anyone have experience on this can point me my error? Just hope to make my code up to date, so use their latest method.

The code as below:

Code update: 

$.mobile.pagecontainer( "change", $('#page2'));

<!doctype html>
<html>
<head>
  <title>Multipage example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="jqm/jquery.mobile-1.4.0.min.css" />
<script src="jqm/jquery-1.11.0.min.js"></script>
<script src="jqm/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="page1">
    <div data-role="header">
      <h1>Page 1</h1>
    </div>
    <div role="main" class="ui-content">
      <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
    </div>
  </div>
  <div data-role="page" id="page2">
    <div data-role="header">
      <h1>Page 2</h1>
    </div>
    <div role="main" class="ui-content">
      <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
    </div>
  </div>
    <script>
    console.log('Next line will start redirect');
    $( "#page1" ).pagecontainer( "change", $('#page2'));
    </script>
</body>
</html>
MarkZ
  • 280
  • 3
  • 14
  • 1
    Replace `$("#page1")` with `$.mobile.pageContainer`. – Omar Feb 03 '14 at 08:49
  • @Omar, thanks for the help. I have update my code as I've posted on my initial post. The redirect didn't work either. Any idea why? – MarkZ Feb 03 '14 at 10:11
  • you have to bind _redirecting_ to an event. you cant just call that function. btw its `pageContainer` capital _"c"_. – Omar Feb 03 '14 at 10:33
  • @Omar, sorry I'm very new to Jquery/Javascript. Can you give an example of "bind"? I tried read the documentation but couldn't get it. Why can simply use jQuery.mobile.changePage() but now became deprecated and need to use a more troublesome method? – MarkZ Feb 03 '14 at 14:30
  • I mean when do you want to redirect user? – Omar Feb 03 '14 at 15:17
  • @Omar, I want to check a key/value in localStorage to decide bring the user to login page or to Main Page (already logged in). If key/value pair exist, redirect to Main Page. If not exist, redirect to login page. – MarkZ Feb 04 '14 at 00:15
  • Before showing first page or when the user is on first page? – Omar Feb 04 '14 at 00:20
  • @Omar, before showing the first page. Intention is for returning user. This will be a Phonegap app. – MarkZ Feb 04 '14 at 00:24
  • Check this http://stackoverflow.com/questions/21504149/programmatically-change-first-page-jquery-mobile-shows/21505481 – Omar Feb 04 '14 at 00:34
  • Thanks @Omar, I'll read that and hope that will solve my question. Thanks again. – MarkZ Feb 04 '14 at 00:44

1 Answers1

0

The DOM may not have been built at the time your script is executed. Try something like this:

$(function() {
    console.log('Next line will start redirect');
    $.mobile.pagecontainer( "change", $('#page2'));
});
Maurice Perry
  • 32,610
  • 9
  • 70
  • 97