Navigating between pages with JQuery Mobile

15,110

Solution 1

I think (But have not tried this) you need to use $.mobile.loadPage('testpage.html') to load the page into the DOM first, then use $.mobile.changePage('#bar') to transition.

Solution 2

You need to mark the external page as external, ie. rel="external"

This will fix your problem:

  <a href="page2.aspx" rel="external" data-role="button">Page 2</a>

15,110

Author by

Mono Developer

Updated on June 04, 2022

Comments

Mono Developer about 2 years

I am working on an application that uses JQuery Mobile. My application has 3 screens, that are separated into two separate ASP.NET files. These screens are "Page 1", Page 2 - A", and "Page 2 - B". These screens are placed in the following files:

page1.aspx

Page 1

page2.aspx

Page 2 - A
Page 2 - B

I have reasons for doing this, the sample that I'm providing here is just to demonstrate the problem. The problem is when I go from page 1 to page 2 - A, things work. However, when I click "B" on Page 2 - A, the screen will not navigate to the page. But, here is where it gets odd. If I navigate directly to page2.aspx in my browser, I can navigate to page 2 - B with no problem. The problem only happens when I start at page1.aspx. Can someone please help me out, my code for the pages looks like the following:

page1.aspx

<!DOCTYPE html> 

<html>
  <head><title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  <link rel="stylesheet" href="/app.css" />

  <script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
  <script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> </script> 
  </head>

  <body>
    <form method="post" action="page1.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" />      
      </div>

      <div data-role="page">
        <div data-role="header"><h1>Page 1</h1></div>

        <div data-role="content">   
            <a href="page2.aspx" data-role="button">Page 2</a></div>
        </div>
      </div>
    </form>
  </body>
</html>

page2.aspx

<!DOCTYPE html> 
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="/app.css" />

    <script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> 
    </script> 
  </head>

  <body>
    <form method="post" action="page2.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" />
      </div>

      <div id="A" data-role="page">
        <div data-role="header"><h1>Page 2 - A</h1></div>
        <div data-role="content">
          <a href="#B " data-role="button">B</a></div>
    </div>
      </div>

      <div id="B" data-role="page">
        <div data-role="header"><h1>Page 2 - B</h1></div>
        <div data-role="content">
            I can't get to this page!
        </div>
      </div>
    </form>
  </body>
</html>