Menu
in ajax navigation pages, the classic "document ready" form for performing initialization javascript simply doesn't fire.
What's the right way to execute some code in an ajax loaded page?
(I mean, not my ajax... it's the jquery mobile page navigation system which brings me to that page)
Ok, I did suspect something like that... thanks a lot =) But... it still doesn't work, here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>mypage</title> <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" /> <script type="text/javascript" src="jquery-1.5.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script> <script type="text/javascript"> $('div').live('pageshow',function(event, ui){ alert('ciao'); }); </script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Shopping Cart</h1> </div> <div data-role="content"> asd </div> </div> </body> Do I need to specify the div id?
876
load(function(){ // ...}) @undefined, this is almost the same as $(document). ready(function(){ ... }) . load() will wait until the graphics are also loaded.
jQuery $(document). ready() Equivalent in JavaScriptThis event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
There is no difference in functionality between your examples - they both bind to DOM ready. For reference, there are two points at which you can bind your jQuery code. The first will execute when the DOM is ready (both are equivalent): // full example $(document).
I spent some time on researching the same since JQM docs are not very detailed at this point. Solution below works fine for me:
<script type="text/javascript"> $('div:jqmData(role="page")').live('pagebeforeshow',function(){ // code to execute on each page change }); </script> You have to implement your own checking flow in order to prevent multiple initialization since the code above will run on every page change
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
