All geek questions in one place

How to embed HTML in div on page load?

I spent a lot of time looking for SO to get a good answer to my question, but nothing struck ... so. I work with jquery, javascript, html and jquery-mobile to create an e-book. There is a table of contents accessible from the slide bar on each page of content. The table of contents, which is a set of nested elements li and ul, contains html, which is reused on every page. If you are familiar with jQuery mobile, I insert this list hierarchy in the <div data-role=panel> section to create collapsible list items in the slide panel. Right now, as I do, I put the 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 on every page he needs, so that I only update the table of contents once when a change occurs, 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 loads, but it does not have access to jQuery mobile, jquery or any external javascript files that I created. I am trying to understand why. I load all resources in <head> , and the table of contents loads in <body> . So, you would think that this would work ... but the only way to get the slide panel to work correctly is to copy the chapter section to the table of contents. Sorry for this long 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 am adding the example.toc.html code so that you guys can see everything that happens.

  <!--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>
+4
source share
2 answers

I am not 100% sure, but I see two options:

1) You copy all the necessary tags from the source document to the TOC.html file

2) Try wrapping this $ .load in $ (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).

+1
source

If you are really configured to run the entire server, can you just wrap your boot code in $ (function () {... code here ...});

It looks like you could use a combination of this and load the full callback function . The stream will look something like this:

  • Wait for the page to load using .ready ()
  • Download failed ()
  • In the complete () callback, add data to the page using any jQuery mobile data attributes you might need on the page.

If you create plunkr for this, we can do a working example.

0
source

Source: https://habr.com/ru/post/1499025/

More articles:


All Articles