Menu
I have spent quite a while searching SO for a good answer to my question, but nothing quite hit the mark...so here goes. I'm working with jquery, javascript, html, and jquery-mobile to create an e book of sorts. There is a table of contents that is accessible from a slide panel on every content page. The table of contents, which is a set of nested li and ul elements, contains html that is repeatedly used on every page. If you're familiar with jquery mobile, I'm inserting this list hierarchy within the <div data-role=panel> section, to create the collapsible list elements within the slide panel. Right now, the way I'm doing this is by putting the exact same table of contents code on every page. Obviously, this is a terrible way to do this. I need to find a way to embed this table of contents code into every page that requires it, so that I must only update the table of contents once when a change is made, instead of updating it on every single page. Right now I'm doing it like this...
<div data-role="panel" id="TOC" data-icon="grid" data-display="overlay">
<script>
$('#TOC').load('example.TOC.html')
</script>
</div> <!--This is the end of the slide panel section-->
The html is loading, but it doesn't have access to jquery mobile, jquery, or any of the external javascript files I've created. I'm trying to understand why. I'm loading all of the resources in the <head> and the table of contents is being loaded in the <body>. So, you would think this would work... but the only way I can get the slide panel to work properly is if I copy the head section to the table of contents file. Sorry for that lengthy explanation...but here is some code to clarify.
<!doctype html> <html> <head> <title class="link-1-1-1-2" <!--id="link-1-1-1-2"--> >Part 2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"></link> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script src="../Support/js/jStorage.js"></script> <script src="../Support/js/bookmark2.js"></script> <script src="../Support/js/linknavigation.js"></script> </head> <body> <div data-role="page"> <!--begin header--> <div data-role="header" data-position="fixed"> <a data-icon="grid" href="#TOC">Table of Contents</a> <h1>Part 2</h1> <button data-icon="check" id="bookmarkPage"> Bookmark </button> </div><!-- /header --> <!--begin content--> <div data-role="content"> <p> The content of the page would go here </p> </div><!-- /content --> <!--begin footer--> <div data-role="footer" data-id="navigation-bottom" data-position="fixed" class="ui-bar"> <div data-role="controlgroup" data-type="horizontal"> <button data-icon="back" data-theme="a" id="previous"> Previous</button> <button data-icon="forward" data-theme="a" id="next"> Next</button> </div> </div><!--footer--> <!--Create a slide panel with the table of contents--> <div data-role="panel" id="TOC" data-icon="grid" data-display="overlay"> <script> $('#TOC').load('example.TOC.html') </script> </div> <!--This is the end of the slide panel section--> </div><!-- /page --> </body> </html>
UPDATE: I'm adding the code for example.toc.html so that you guys can see everything that's going on.
<!--These first lines are required to get the table of contents working, but cause other
issues-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="../Support/js/jStorage.js"></script>
<script src="../Support/js/bookmark2.js"></script>
<script src="../Support/js/linknavigation.js"></script>-->
<!--create a navbar for the top-->
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<button data-icon="plus" data-theme="a" id="openAll">Expand All</button>
<button data-icon="minus" data-theme="a"id="closeAll">Collapse All</button>
</div><!-- /navbar -->
<!--Give the panel some control buttons from out linknavigation.js file-->
<!--Give the panel some control buttons from out linknavigation.js file-->
<div data-role="controlgroup" >
<button data-icon="plus" data-mini="true" data-theme="a" id="openSome"> Expand Some</button>
<button data-icon="minus" data-mini="true" data-theme="a" id="closeSome"> Collapse Some</button>
<button data-icon="arrow-d" data-mini="true" data-theme="a" id="expandBookmarks">View Bookmarks</button>
<button data-icon="delete" data-mini="true" data-theme="a" id="clearBookmarks"> Clear Bookmarks </button>
</div>
<!--Create list structure....this is not an ideal solution...need a way to reference this structure externally-->
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
<h3>Chapter 1</h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-2">
<h3> Unit 1 </h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 1</h3>
<!--<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>-->
<a data-role="button" data-theme="e" data-mini="true" id="link-1-1-1-1" rel="external" href='example.chapter1-unit1-section1-part1.html'>Part 1</a>
<a data-role="button" data-theme="e" data-mini="true" id="link-1-1-1-2" rel="external" href='example.chapter1-unit1-section1-part2.html'>Part 2</a>
<li data-role="collapsible" data-theme="e" data-mini="false" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="false" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 2</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
</ul>
</div>
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
<h3>Chapter 2</h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-2">
<h3> Unit 1 </h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 1</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 2</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
</ul>
</div>
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
<h3>Chapter 3</h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-2">
<h3> Unit 1 </h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 1</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 2</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
</ul>
</div>
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
<h3>Chapter 4</h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-2">
<h3> Unit 1 </h3>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 1</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
<ul data-role="collapsible" data-mini="true" class="expandable depth-3">
<h3>Section 2</h3>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
</ul>
</ul>
264
I'm not 100% sure but I see two options:
1) You copy over all the necessary tags from the original document to the TOC.html file
2) Try and wrapping that $.load into a $(document).ready / $(window).load and see what happens. I would put this in a regular comment but unfortunately I can't comment yet (need 50 rep).
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
