1

I have a multi-HTML app built with jQuery mobile and Phonegap/Cordova. I understand single page HTML is preferred, but it just won't work with my current set up (I have to use a CMS to produce the content, which will be on separate HTML).

Everything works fine on the index.html. I am able to navigate from index.html to child.html by using the usual <a href="child.html"></a> and the page is loaded and everything looks good (CSS is loaded), but none of my javascript is being executed in child.html. Tabs, dropdowns, etc that is using jquery mobile API is no longer working.

This is the structure of my index.html file which contains calls to the JS and CSS file.

<!DOCTYPE html>
<html>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
  <script type="text/javascript" src="scripts.js"></script>
  <script src="cordova.js"></script>
  <link rel="stylesheet" href="styles.css" type="text/css">
<body>
<div data-role="page">
    <div data-role="panel" id="mypanel" data-position="left" data-display="push">[nav code here]</div>
    <div data-role="header">[header code here]</div>
    <div data-role="main">
      [main content code here]
      <a href="child.html">link to child page</a>
    </div>
    <div data-role="footer">[footer code here]</div>
</div>
</body>
</html>

then, what's inside my child.html page that gets linked from index page

<div data-role="page">
    <div data-role="panel" id="mypanel" data-position="left" data-display="push">[nav code here]</div>
    <div data-role="header">[header code here]</div>
    <div data-role="main">[main content code here]</div>
    <div data-role="footer">[footer code here]</div>
</div>
Melissa Hie
  • 471
  • 2
  • 10
  • i hate to ask the obvious, but it looks like your child.html page doesn't include the full markup that the index.html does. Every individual page on a web server needs to contain full markup, including html, body, and all the imports. – erikrunia Nov 11 '14 at 03:27
  • I thought that's supposed to be the whole point of JQM. It injects the second page into DOM (or something along that line) and you only have to include data-role=page HTMLs on the other pages... it seems to work because my CSS is being loaded, but JS is not working. – Melissa Hie Nov 11 '14 at 03:28
  • I can't see anything from eyeballing the code which looks ok to me. Would it be possible to build a sample for testing. I believe "plunker" might be the tool to use? – Kolban Nov 11 '14 at 03:42
  • @Kolban a bit hard to sample since this is a multi-page thing. I noticed only things included in document.ready is breaking though.. does that mean anything? – Melissa Hie Nov 11 '14 at 03:54
  • @MelissaHie I think we are probably going to have to see a sample. Maybe have a look at http://plnkr.co/ I think this can handle multi file samples. If not that, then maybe attach more of your source in a pastebin. Specifically, I want to see more evidence of what you expect to see happen in child.html. – Kolban Nov 11 '14 at 04:01
  • I Second erikrunia, the purpose of JQM is correct, to inject individual pages, but that also means it executes the js files, css files etc included in index.html only once, in order to re-execute the javascript for each page show, the js files must be included in each html header, unless its single page architecture where you don't need to do it. – Sheetal Nov 11 '14 at 05:28
  • I figured it out. I'll post the answer on my original post. Thanks everyone :) – Melissa Hie Nov 11 '14 at 05:50

1 Answers1

1

Figured it out. Turns out on my own JS we can't use document.ready for JQM. So I used $(document).on('pageinit', function() {}); and it loaded fine, though I needed to do some fine tuning for jquerymobile tabs.

See this link for a more thorough explanation on why this happened: jQuery Mobile: document ready vs page events

Community
  • 1
  • 1
Melissa Hie
  • 471
  • 2
  • 10