All geek questions in one place

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

in this project im using jquery and phonegap

I have a link that, when clicked, will change the page:

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

this works fine, but I want to run the function ( playMusic() ) when doing the transition, 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 fires on the displayed page after its transition is complete, but I'm not sure how to use it

this doesn't seem to work, any ideas?

thanks

+6
source share
1 answer

I have not been developing jQuery mobile devices, so this may not be the most effective solution. As you said, the pageshow event is what you need to use. Here are two HTML files that I ran locally in which I see a warning after the stats.html page transition stats.html . .live() attached to the #stats page pageshow page pageshow page.

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>
+3
source

Source: https://habr.com/ru/post/908692/

More articles:


All Articles