title: How to redirect to a different page in jquery mobile
body: <p>I'm still fairly new to jquery mobile and how ajax handles page transitions so I suspect the fault may lie somewhere with that.</p>
  
  <p>I have set my jqm / phonegap app up using multiple pages.  </p>
  
  <p>The homepage checks to see if the user is logged in, retrieving memberID information from localStorage.  My intent is to do this before the page has displayed and if logged in automatically send the user to page 2 using: </p>
  
  <pre><code>$(document).on(
          "pagebeforecreate",
          "#homepage",
          function(){
          $(':mobile-pagecontainer').pagecontainer('change', 'page2.html', {
                  transition: 'none',
                  changeHash: false,
                  reverse: true,
                  showLoadMsg: false
              });
  </code></pre>
  
  <p>The problem is that homepage briefly appears or "flashes" before redirecting.  However, when I make it a single page layout and separate the pages using the data-role="page" principle, it works as desired.</p>
  
  <p>So my question is how to I prevent homepage from briefly appearing using a multi-page design?</p>
  
  <p>Here is the full code...</p>
  
  <p><strong>Homepage:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta http-equiv="Content-Security-Policy"
      content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="format-detection" content="telephone=no" /&gt;
  &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
  &lt;meta name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;
  
  &lt;!-- styles --&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
  &lt;link href="jquerymobile/jquery.mobile-1.4.5.css" rel="stylesheet"
      type="text/css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/custom.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrapCustom.css" /&gt;
  
      &lt;!-- scripts --&gt;
  &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).bind("mobileinit", function() {
          $.support.cors = true;
          $.mobile.allowCrossDomainPages = true;
      });
  &lt;/script&gt;
  
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="jquerymobile/jquery.mobile-1.4.5.min.js"
      type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div data-role="page" id="homepage" data-theme="a"&gt;
  
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content"&gt;
  
              &lt;form id="loginForm" name="loginForm"&gt;
  
                  &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
                      &lt;label for="username"&gt;Username:&lt;/label&gt; &lt;input type="text"
                          name="username" id="username" placeholder="Username" autocorrect="off" autocapitalize="off" /&gt;
                  &lt;/div&gt;
  
                  &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
                      &lt;label for="password"&gt;Password:&lt;/label&gt; &lt;input type="password"
                          name="password" id="password" placeholder="Password" /&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;p id="status"&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;input type="submit" id="submitButton" value="Login"&gt;
  
  
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false"&gt;
              &lt;h4&gt;&amp;copy; myFooterThingy 2015&lt;/h4&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Page 2:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Security-Policy"
      content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="format-detection" content="telephone=no" /&gt;
  &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
  &lt;meta name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
  &lt;link href="jquerymobile/jquery.mobile-1.4.5.css" rel="stylesheet"
      type="text/css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/custom.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrapCustom.css" /&gt;
  
  &lt;!-- scripts --&gt;
  &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="jquerymobile/jquery.mobile-1.4.5.min.js"
      type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Page 2&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div data-role="page" id="page2" data-theme="a"&gt;
  
          &lt;div data-role="header" data-theme="b" id="membertoolbar"&gt;Some header stuff&lt;/div&gt;
  
          &lt;div data-role="content"&gt;
  
              &lt;h2&gt;Logged In!&lt;/h2&gt;
              &lt;p id="memberID"&gt;&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer" data-position="fixed" data-theme="b"&gt;
              &lt;h4&gt;&amp;copy; moreFooter Stuff&lt;/h4&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>$(document).on(
          "pagebeforecreate",
          "#homepage",
          function() 
          {
              if (typeof (localStorage.memberID) != "undefined" &amp;&amp; localStorage.memberID !== null) 
              {
                  $(':mobile-pagecontainer').pagecontainer('change', 'page2.html', 
                  {
                      transition: 'fade',
                      changeHash: false,
                      reverse: true,
                      showLoadMsg: false
                  });
              }
          });
  </code></pre>