how to run a callback function after $.mobile.changePage is ready in jquery?

Question

in this project im using jquery and phonegap

$('#statsButtonmain').on('click', function() {
        $.mobile.changePage("stats.html", { transition: "slideup"}, true, true);  
});

Answer 1

I've not done a lot a jQuery mobile development so this might not be the most efficient solution. As you said, the pageshow event is what you need to use. Here are the 2 HTML files I ran locally in which I see the alert after the stats.html page transition is completed. The .live() is bound to the #stats element's page pageshow event.

HTML

(saved as index.html)

<!doctype html> 
<html> 
  <head> 
    <title>Home</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#statsButtonmain').on('click', function() {
           $.mobile.changePage('stats.html', { transition: 'slideup'}, true, true);  
        });

        $('#stats').live('pageshow', function(event, ui) {
          playMusic();
        });

        function playMusic() {
          alert('playing music');
        }
    });
    </script>
</head> 
<body>
<div data-role="page" id="home">
    <div data-role="header">
       <h1>Callback test</h1>
    </div>
    <div data-role="content">
      <a href="#" id="statsButtonmain">click me</a>
    </div>
</div>
</body>
</html>

(saved as stats.html)

<!doctype html> 
<html> 
  <head> 
    <title>Stats</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
</head> 
<body>
<div data-role="page" id="stats">
    <div data-role="content">some stats</div>
</div>
</body>
</html>

Answer 2

async function loadPage(_url) {
  let promise = new Promise((resolve) => {
    $.mobile.changePage(_url);
    var currentPage;
    function checkCurrentPage() {
      currentPage = $("body").pagecontainer("getActivePage");
      if (currentPage[0].baseURI.includes(_url)) {
        clearInterval(loadPageInt);
        resolve();
      }
    }
    var loadPageInt = setInterval(function () {
      checkCurrentPage();
    }, 100);
  });
  return await promise;
}

how to run a callback function after $.mobile.changePage is ready in jquery?

Question

2 answers

solution1
4 ACCPTED 2012-02-17 10:35:14

HTML

solution2
0 2022-02-04 14:46:11

how to run a callback function after $.mobile.changePage is ready in jquery?

Question

2 answers

solution1 4 ACCPTED 2012-02-17 10:35:14

HTML

solution2 0 2022-02-04 14:46:11

solution1
4 ACCPTED 2012-02-17 10:35:14

solution2
0 2022-02-04 14:46:11