1

I have an index.html page that loads jquery and jquery mobile libraries (latest versions) with links to two other pages. 

<a href="page2.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e"  >Page2</a>

<a href="page3.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e"  >Page3</a>

Is it possible to include custom javascript files in page 2 and 3? If I include them like this page2.html renders properly, but js file seems to be ignored. The goal of this is to distibute the wait time in loading javascript between the main menu and application pages.

page2.html:

<!DOCTYPE html>
<html>
    <head>
    <title>My Apptitle>
    <meta charset="utf-8"/>

    <!-- custom files and libraries --> 
    <script src="../js/mycode.js"></script> 
    </head>
    <body>

<div data-role="page"  id="preTktTab">
<div data-role="header" data-position="inline">
<!-- and so on -->
Mustapha George
  • 2,497
  • 9
  • 47
  • 79

1 Answers1

0

Here is an explanation I gave to someone about a very similar question: jQueryMobile page events not firing when navigating to a different html page

Basically when you navigate to page in the jQuery Mobile framework, the framework pulls the page into the DOM via AJAX. When it does this, it only grabs the HTML within the first <div data-role="page"> element on the page and ignores the rest of the page. So if you want to load JavaScript on these page-views then you need to add the <script> tags inside the <div data-role="page"> element.

For example, change:

<html>
<head>
    <script src="..." type="text/javascript"></script>
</head>
<body>
    <div data-role="page">
        ...mobile page here...
    </div>
</body>
</html>

To:

<html>
<head>
</head>
<body>
    <div data-role="page">
        <script src="..." type="text/javascript"></script>
        ...mobile page here...
    </div>
</body>
</html>

Here is some good reading on the subject (notice the "Known Limitations" at the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html

Community
  • 1
  • 1
Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Your solution worked on Mozilla and Chrome. Unfortunately on Blackberry, our mobile browser, it loaded javascript files, but did not seem to execute then. – Mustapha George Nov 15 '11 at 20:07
  • You can use `eval()` to evaluate the code, something like: `eval($('#page_id').find('script').html());` But if the code you are breaking-up is only a KB or so, I wouldn't worry about splitting the JS up. – Jasper Nov 15 '11 at 20:09
  • Have you seen an example or model for structuring large JQM aaplications with "late loading" javascript. It look like you have thought about this a bit! – Mustapha George Nov 15 '11 at 20:31
  • I don't have an example to show you at the moment, however I know Google does something close to this. Google will load blocks of commented-out JavaScript on page-load and use `eval()` to parse the code into the DOM after the initial load has occurred (this speeds up the initial rendering of the webpage). A more simple solution may be to write a block of code that gets included on every page that loads specific scripts for pages: `$('#page_id').on('pagecreate', function () {$.getScript('path/to_js/file.js');});` – Jasper Nov 15 '11 at 20:39
  • Jasper - Thanks for your comments. A few questions - Using second technique mentioned - is the js cached and available for other pages? On subsequent loads of same page, does js get re-loaded on each return to the page? – Mustapha George Nov 15 '11 at 21:35