发表新帖
发表新帖

JQuery Mobile changePage

前端 未结
关注
2 1165
旧巷少年郎
旧巷少年郎 2021-01-14 16:59

I am designing a JQuery Mobile application and facing one problem there, I have two pages, page1.aspx and page2.aspx, I have to redirect from

相关标签:
2条回答
  • 名媛妹妹
    2021-01-14 17:34

    It seems that when you call changepage specifying a transition, the second page appears to be "injected" into the first one. You can check it easily because $(document).ready(function(){}) does not work in the second page.

    I am using Cordova in a Windows Phone 7 application, I changed my script location.href to use $.mobile.changepage() and there was this problem: I wanted that the second page to fire any load event, but none worked (pageshow, pagechange, pagebeforechange, body onload, $(document).ready, etc).

    Here are my findings so far that might help you and other people:

    the index.html is my start page as follows

    <!DOCTYPE html>
<html>
  <head>
  <title></title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript">
        function callSecondPage() {
            //save my scroll position in index page
            var top = $(window).scrollTop();
            window.sessionStorage.setItem('top', top);
            //go to the second page
            $.mobile.changePage("secondpage.html", { transition: "slide", changeHash: true, reloadPage :true }); 

  </script>
  <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.min.css" />
  </head>
  <body onload="onLoad()">
      <div class="my-page" data-role="page" data-title="My App Title" data-theme="a"> 
          <div class="header" data-role="header"> 
              <img src="img/title.png" />
          </div><!-- /header -->
          <div data-role="content"> 
              <div class="my-logo">
                <img src="img/logo.png"/>
              </div>

              <div class="my-content">
            some stuff here
            <a href="#" onclick="callSecondPage()">Call second page</a>

              </div>
          </div>
  </body>
  </html>

    Now the working secondpage.html. Understanding that is not possible to use pagechange or $(document).ready, we notice we can use pageinit to simulate a "page load".

    <!DOCTYPE html>
<html>
  <head>
  <title></title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    <script type="text/javascript">
        function onLoad() {
            //LOL! this does not work using $.mobile.changepage as caller
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        // Cordova is loaded and it is now safe to make calls Cordova methods
        //
        function onDeviceReady() {
            //LOL! this will never run using $.mobile.changepage as caller
            // Now safe to use the Cordova API
            var top  = sessionStorage.getItem('top');            
        }

    </script>
  </head>
  <body onload="onLoad()">
      <div class="my-second-page" data-role="page" data-title="App Title" data-theme="b"> 
      <script type="text/javascript">
          $(".my-second-page").live('pageinit', function () {
              //LOL! Hey this WORKS! I can see an output in Visual Studio!
              console.log('************************* pageinit');
              console.log('************************* '+ sessionStorage.getItem('top'));
          });
          $(".my-second-page").live('pagechange', function () {
              //LOL! Again, this is not going to work, well, it does not print an output in Visual Studio!
              console.log('************************* pagechange');
              console.log('************************* ' + sessionStorage.getItem('top'));
          });
        </script>
          <div data-role="header"> 
              <h1>App title</h1>
          </div><!-- /header -->
          <div data-role="content"> 
              <div class="my-content">
                   your stuff here for second page                      
              </div>
              <p>
              <a href="index.html" data-role="button" data-theme="b" data-transition="flip" rel="external" data-icon="back" data-iconpos="left" data-inline="true">Back</a>
              </p>
          </div>

          <div data-role="footer" class="ui-footer" data-position="fixed">
            <h1>My footer</h1>
          </div>
      </div>
  </body>
</html>

    This is a true working sample, if anyone needs I can share a sample project.

    0 讨论(0)
  • 深忆病人
    2021-01-14 17:37

    The events are not the same with changePage, because that method makes an Ajax call to the new url, that's different from the direct call in window.location.href

    Did you tried with this method:

    $('div').live("pageshow", function()
{
   //your code
});

    EDIT: Looking at the JQuery Mobile page, I saw that there's and event triggered after the page change.

    http://jquerymobile.com/test/docs/api/events.html

    0 讨论(0)
 看不清?
提交回复
热议问题