Javascript doesnt run when navigating through listview , jquery mobile -
i developing jquery mobile website , have problems running javascript code.
i have home page , index.html , listview navigate various html pages. use single-page structure pages , means every 1 html file contains 1 page. home page , navigate page using persistent navbar horizontal button 2 options. 1 photos , other multimedia.
for photos using javascript fb api , download photos fb page , photoswipe plugin present them user.
the problem..
if run photos.html page , work , load albums. there 2 things javascript does. 1) use fb api albums, photos , cover photos etc.. 2) dynamically create listview albums , photos. in case both work great!
however when in index.html , navigate through listview photos.html (photos default chosen button persisent navbar) javascript code doesnt work. not called @ all..
the index.html looks like:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery mobile web app</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>--> <link rel="stylesheet" href="themes/espaciojoven.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-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> <link rel="stylesheet" href="themes/custom.css" /> </head> <body> <div data-role="page" id="home" data-theme="a"> <!-- <div data-role="header"> <h1>application title</h1> </div> --> <div data-role="content"> <h2 id="banner">joven mobile</h2> <div class="main_menu"> <ul data-inset="true" data-role="listview"> <li><a href="eciojven.html"><img src="themes/icons/news.png" alt="information" class="ui-li-icon">esen</a></li> <li><a href="nejoven.html"><img src="themes/icons/research.png" alt="information" class="ui-li-icon">laen</a></li> <li><a href="photos.html"><img src="themes/icons/staff.png" alt="information" class="ui-li-icon">multimedia</a></li> <li><a href="sajhrjoven.html"><img src="themes/icons/students.png" alt="information" class="ui-li-icon">sanen</a></li> </ul> </div> </div> <!-- <div data-role="footer"> <h4>page footer</h4> </div> --> </div> </body> </html> the photos.html looks :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery mobile web app</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>--> <link rel="stylesheet" href="themes/espaciojoven.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-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> <link rel="stylesheet" href="themes/custom.css" /> <!-- needed photoswipe plugin --> <link href="photoswipe/jquery-mobile.css" type="text/css" rel="stylesheet" /> <link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="photoswipe/klass.min.js"></script> <script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script> <script type='text/javascript' src='photoswipe/photoswipecall.js'></script> <!-- needed photoswipe plugin --> </head> <body> <div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="back"> <div data-role="header" data-id="fixednav" data-position="fixed"> <h1>application title</h1> <a href="#" data-icon="back" data-rel="back" title="go back">back</a> <div data-role="navbar"> <ul> <li><a href="photos.html" class="ui-btn-active ui-state-persist">photos</a></li> <li><a href="videos.html">videos</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" class="albums"> <!-- here albums created through javascript (createalbums.js) --> </ul> <button type="button" id="loadmorealbums">more albums...</button> </div><!-- /content --> </div><!-- /page --> <div id="fb-root"></div> <script type='text/javascript' src='javascript/createalbums3.js'></script> </body> </html> as see call javascript in end. ideas why never called? if refresh page , means run photos.html , load normally.
actually @ "elements" table debugger. when im in index.html page html elements seem correct. when transition though photos.html page , looking @ elements table see dont change! title change rest stays same incredible?! how on earth can happen? looks same page , same css , javascript sources , should different! see use photoswipe javascript , css etc! if reload page elements correct. please ideas? have no idea happening here.
also reason 304 status , not modified through transition , 1 page another.
the reason because when navigate page in jquery mobile defaults try , pull jqm page (data-role="page" (if there no data-role='page' pull body)) via ajax , attaches current page's dom, thing pull jqm page (or body if there isn't any) , ignore (aside title) outside of meaning javascript not going called.
when refresh page normal http call made , entire page loaded code executed.
in order have javascript called need either have relevant script's on first page or can have withing jqm page wrapper , pulled along it.
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="back"> .... <script type='text/javascript' src='javascript/createalbums3.js'></script> </div><!-- /page --> have @ following q&a official docs more details.
Comments
Post a Comment