in this project im using jquery and phonegap
i have a link that if clicked , changes the page:
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
});
this works fine, but i would like to run a function (playMusic()) when the transition is done, something like this:
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
playMusic();
});
i found out that there is a pageshow event that gets triggered on the page being shown, after its transition pletes, but im not sure how to use it
this doesn't seem to work, any ideas?
Thanks
in this project im using jquery and phonegap
i have a link that if clicked , changes the page:
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
});
this works fine, but i would like to run a function (playMusic()) when the transition is done, something like this:
$('#statsButtonmain').on('click', function() {
$.mobile.changePage("stats.html", { transition: "slideup"}, true, true);
playMusic();
});
i found out that there is a pageshow event that gets triggered on the page being shown, after its transition pletes, but im not sure how to use it
this doesn't seem to work, any ideas?
Thanks
Share Improve this question asked Feb 17, 2012 at 9:59 PatrioticcowPatrioticcow 27.1k76 gold badges221 silver badges339 bronze badges2 Answers
Reset to default 4I'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 pleted. 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./mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery./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./mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery./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>
I hope this helps someone. It also retains the query string between pages too.
async function loadPage(_url) {
let promise = new Promise((resolve) => {
var _query = "";
if (window.location.href.includes("?")) {
if (window.location.href.split("?").length >= 2) {
_query = "?" + window.location.href.split("?")[1];
}
}
$.mobile.changePage(_url + _query);
var currentPage;
function checkCurrentPage() {
if (typeof $("body").pagecontainer != "undefined") {
currentPage = $("body").pagecontainer("getActivePage");
if (currentPage[0].baseURI.includes(_url)) {
clearInterval(loadPageInt);
resolve();
}
}
}
var loadPageInt = setInterval(function () {
checkCurrentPage();
}, 100);
});
return await promise;
}
Usage:
loadPage('file.html')
.then(() => {
// do some stuff now the page has changed to file.html
});