Home/ Questions/Q 7408557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:56:16+00:00

I am working on an application that uses JQuery Mobile . My application has

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    More on that here:

    Also I’ve seen use of the target attribute but not sure if this would work using $.mobile.changePage()

    Also I think jQM Sees this as ‘Deep Linking’ but I see that’s not what you’re trying to accomplish

    PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax ‘pages’, it’s not currently possible to deep
    link to an anchor (index.html#foo) on a page in jQuery Mobile,
    because the framework will look for a ‘page’ with an ID of #foo
    instead of the native behavior of scrolling to the content with that
    ID.

    • 0