javascript - <head> JS scripts are not executing -
i'm using jquery mobile, , navigate through pages minimum of loading amount of scripts everytime page beingness loaded, mean import once general scripts of pages (jquery.js, jquery_mobile.js, main.js etc...) ,
so have index.html next code :
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>hybrid app</title> <link rel="stylesheet" href="jquerymobile/jquery.mobile-1.4.4.css" /> <link rel="stylesheet" href="jquerymobile/jquery.mobile.icons-1.4.4.css" /> <link rel="stylesheet" href="css/jquery.mmenu.css" /> <link rel="stylesheet" href="css/main.css" /> <script>window.$ = window.jquery = wljq;</script> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <script type="text/javascript" src="jquerymobile/jquery.mobile-1.4.4.js"></script> <script type="text/javascript" src="js/jquery.mmenu.min.js"></script> <script type="text/javascript" src="js/initoptions.js"></script> <script type="text/javascript" src="sharedresources/customersobject.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/messages.js"></script> </head> <body style="display: none;"> <div data-role="page" id="page"> <link rel="stylesheet" href="css/pages/splash-view.css" /> <div data-role="header" id="header" data-position="fixed"></div> <div data-role="content" id="pagecontent"> <div id="splash-wrapper"> <div class="splash-content"> <a href="pages/faqs-view.html" data-role="button" data-inline="true" data-theme="b" id="loginaction">login</a> </div> </div> </div> <div data-role="footer" id="footer" data-position="fixed"></div> <nav id="menu"> <ul data-role="listview" data-inset="true"> <!-- list of items in slide sidebar menu (called drawer menu in andorid --> </ul> </nav> <script src="js/pages/splash-view.js"></script> </div> </body> so when clicking on link go external html file located in : pages/faqs-view.html next code :
<div data-role="page" id="page" data-url="pages/faqs-view.html"> <link rel="stylesheet" href="css/pages/faqs-view.css"> <div data-role="header" id="header" data-position="fixed"></div> <div data-role="content" id="pagecontent"> <div id="faqs-wrapper"> <div class="faqs-content"> <div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set"> </div> </div> </div> </div> <div data-role="footer" id="footer" data-position="fixed"></div> <nav id="menu"> <p class="employee-name">welcome, ali</p> <ul data-role="listview" data-inset="true"> <!-- list of items in slide sidebar menu (called drawer menu in andorid --> </ul> </nav> <script src="js/pages/faqs-view.js"></script> the problem when loading faqs-view.html page, can see none of scripts included in <head> beingness executed, have tried set them after <body> tag, it's same, but css files beingness interpreted.
how can accomplish ? give thanks you.
worklight-based applications single page applications. means should never navigate away index.html. doing cause app lose context worklight framework, begin fail.
if you'd add together multi-page navigation application, can using api provided 3rd-party frameworks. here using jquery mobile.
you've changed loading order of scripts. shouldn't.
use worklight studio wizard in order create app template jquery mobile (new project > new hybrid application (click on "configure javascript libraries" > select library add))
keep initoptions.js, main.js , messages.js default, @ bottom
the index.html get template jquery mobile
if want replace bundled jquery, need comment out (slide #6) next script tag: <script>window.$ = window.jquery = wljq;</script>. worklight bundled jquery 1.9.x.
for bare-bones illustration of multi-page navigation in worklight-based application, using jquery mobile, take @ project.
as navigate between pages, replace contents of data-role="page". scripts have been loaded. can load additional scripts per required when loading specific page.
javascript jquery html jquery-mobile worklight
No comments:
Post a Comment