title: Navigating between pages with JQuery Mobile
body: <p>I am working on an application that uses <a href="http://jquerymobile.com" rel="nofollow">JQuery Mobile</a>. 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:</p>
  
  <p><strong>page1.aspx</strong></p>
  
  <pre><code>Page 1
  </code></pre>
  
  <p><strong>page2.aspx</strong></p>
  
  <pre><code>Page 2 - A
  Page 2 - B  
  </code></pre>
  
  <p>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:</p>
  
  <p><strong>page1.aspx</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  
  &lt;html&gt;
    &lt;head&gt;&lt;title&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
    &lt;link rel="stylesheet" href="/app.css" /&gt;
  
    &lt;script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"&gt; &lt;/script&gt; 
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;form method="post" action="page1.aspx" id="form1"&gt;
        &lt;div class="aspNetHidden"&gt;
          &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
            value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" /&gt;      
        &lt;/div&gt;
  
        &lt;div data-role="page"&gt;
          &lt;div data-role="header"&gt;&lt;h1&gt;Page 1&lt;/h1&gt;&lt;/div&gt;
  
          &lt;div data-role="content"&gt;   
              &lt;a href="page2.aspx" data-role="button"&gt;Page 2&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>page2.aspx</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
      &lt;link rel="stylesheet" href="/app.css" /&gt;
  
      &lt;script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"&gt; 
      &lt;/script&gt; 
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;form method="post" action="page2.aspx" id="form1"&gt;
        &lt;div class="aspNetHidden"&gt;
          &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
            value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" /&gt;
        &lt;/div&gt;
  
        &lt;div id="A" data-role="page"&gt;
          &lt;div data-role="header"&gt;&lt;h1&gt;Page 2 - A&lt;/h1&gt;&lt;/div&gt;
          &lt;div data-role="content"&gt;
            &lt;a href="#B " data-role="button"&gt;B&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="B" data-role="page"&gt;
          &lt;div data-role="header"&gt;&lt;h1&gt;Page 2 - B&lt;/h1&gt;&lt;/div&gt;
          &lt;div data-role="content"&gt;
              I can't get to this page!
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>