CODEWITHSUNDEEP
javascriptjquery-mobilenavigation
Mono Developer
Mono Developer

Reputation: 619

Navigating between pages with JQuery Mobile

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>

Upvotes: 2

Views: 15208

Answers (4)

Aouadi Mohamed Ali
Aouadi Mohamed Ali

Reputation: 1

you can user target : target="_self" for me it's work 100%

Upvotes: 0

Jack
Jack

Reputation: 16728

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>

Upvotes: 1

corthmann
corthmann

Reputation: 377

Okay this is going to sound a bit weird. But I tried your example (by copying your codesamples) and experienced the same problem you have. However I noticed that you have a whitespace in your link to page #B, like it is shown below:

<a href="#B " data-role="button">...</a>

When I removed the whitespace everything worked fine. Try it out and let me know if it works for you.

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85378

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.

Upvotes: 2

Related Questions