i have page nabars, , when "my activity" navbar clicked want on load, , testing purposes, trying alert message screen on load, since js file being called not sure, jquery mobile load function use?
here html page:
<html> <head> <title>my activity</title> <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script> <style> </style> </head> <body> <div data-role="page"> <div data-role="header" data-id="pagetabs" data-theme="a" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="custom">facebook</a></li> <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="custom">youtube</a></li> <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="custom" class="ui-btn-active ui-state-persist">my activity</a></li> </ul> </div> </div> </div> <div data-role="footer" data-theme="a" data-position="fixed"><h5>social stream</h5></div> </div> <script src="my_activity.js"></script> </body> </html> and in my_activity.js file have tried different, page load functions. tried following, gets fired when manually refresh browser, doesn't fired when click on navbar tab
$(document).on('pageinit', '[data-role="page"]', function(){ alert("hello"); });
put line:
<script src="my_activity.js"></script> inside page div, this:
<div data-role="page"> <div data-role="header" data-id="pagetabs" data-theme="a" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="custom">facebook</a></li> <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="custom">youtube</a></li> <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="custom" class="ui-btn-active ui-state-persist">my activity</a></li> </ul> </div> </div> <div data-role="footer" data-theme="a" data-position="fixed"><h5>social stream</h5></div> <script src="my_activity.js"></script> </div> you suffering classic jquery mobile problem. topic not discussed part of official documentation try explain you.
when jquery mobile loads additional html pages loads page div (data-role="page"=, else stripped. because head exist inside dom , head not needs, same goes rest of page.
if want find more take @ blog article discuss topic. there find better description plus few solutions examples. read carefully.
Comments
Post a Comment