CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Melissa Hie
Melissa Hie

Reputation: 471

jquery mobile - JS not executed on second page of multi-HTML app

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>

Upvotes: 1

Views: 922

Answers (1)

Melissa Hie
Melissa Hie

Reputation: 471

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

Upvotes: 1

Related Questions