title: how to load an external html file that contains scripts
body: <p>Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called <a href="http://chemapps.stolaf.edu/jmol/jsmol/jsmol.htm" rel="nofollow">JSmol</a>, which plots 3D molecules that can be manipulated interactively. The main page looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; 3D Chemistry &lt;/title&gt;
  &lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" /&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'&gt;
  &lt;script type="text/javascript" src="jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- META TAGS start --&gt;
  &lt;meta name="Title" content="Molecular Chemistry" /&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;!-- META TAGS end --&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    // select all the links with class="lnk", when one of them is clicked, get its "href" value
    // load the content from that URL and check the "status" of the request
    // place the response or an error message into the tag with id="content"
    $('a.lnk').click(function() {
      var url = $(this).attr('href');
      $('#content').load(url, function(response, status, xhr) {
        // check the status, if "success", place the response into #content
        // else, if "error", define an error message and insert it into #content
        // else, display an Alert with the status
        if(status=='success') {
          $('#content').html(response);
        }
        else if(status=='error') {
          var ermsg = '&lt;i&gt;There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '&lt;/i&gt;';
          $('#content').html(ermsg);
        }
        else { alert(status); }
      });
      return false;
    })
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b"&gt;
  &lt;div id="header"&gt; &lt;a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III"&gt;
     &lt;img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px /&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="vmenu"&gt;
  &lt;ul&gt; 
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3D Molecules&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="Mol1.html" class="lnk"&gt;Mol1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Mol2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Symmetry&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Symmetry Elements&lt;/a&gt;
                &lt;ul&gt;
           &lt;li&gt;&lt;a href="#"&gt;C&lt;sub&gt;2&lt;/sub&gt;H&lt;sub&gt;6&lt;/sub&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Ru&lt;sub&gt;4&lt;/sub&gt;H&lt;sub&gt;4&lt;/sub&gt;(CO)&lt;sub&gt;12&lt;/sub&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="PG.html" class="lnk"&gt;Point Groups&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Solids&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;fcc&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;hcp&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  &lt;/div&gt;
  &lt;div class="s_author" id="footer"&gt;
  author: romuald.poteau_at_univ-tlse3.fr
  &lt;br/&gt;last modification: 2013/12/16
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Up to now, I have worked on the PG.html file (<strong>Point Group</strong> entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; POINT GROUPS &lt;/title&gt;
  &lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" /&gt;
  &lt;!-- META TAGS start --&gt;
  &lt;meta name="Title" content="Molecular Chemistry" /&gt;
  &lt;meta name="Format" content="text/html" /&gt;
  &lt;meta name="Language" content="en" /&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;!-- META TAGS end --&gt;
    &lt;script type="text/javascript" src="jquery/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="./JSmol.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
  // ---------------------------------------------------------------------------------
  ////// every page will need one variable and one Info object for each applet object
  var Info = {
      width: 500,
      height: 500,
      color: "0xC0C0C0",
      use: "HTML5",
      jarPath: "java",
      j2sPath: "j2s",
      jarFile: "JmolApplet.jar",
      isSigned: false,
      addSelectionOptions: false,
      serverURL: "php/jsmol.php",
      readyFunction: jmol_isReady,
      console: "jmol_infodiv",
      disableInitialConsole: true,
      debug: false,
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b"&gt;
  &lt;div class="s_title" id="titlePG"&gt;
     Point Groups
  &lt;/div&gt;
  &lt;div class="s_normal" id="mainPG"&gt;
  &lt;table border="0"&gt;
    &lt;tbody&gt;
      &lt;tr valign="top"&gt;
        &lt;td nowrap="nowrap"&gt;
        &lt;script type="text/javascript"&gt;
          Jmol.getApplet("Jmol1", Info);
          Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
      Jmol.resizeApplet(Jmol1, 500);
        &lt;/script&gt;
        &lt;br&gt;
        &lt;/td&gt;
        &lt;td&gt;
        &lt;script&gt;
        Jmol.setButtonCss(null,"style='width:300px'")
        Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
        Jmol.jmolBr();
        Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
        Jmol.jmolBr();
        Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
        &lt;/script&gt;
        &lt;br&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.</p>
  
  <p>Thanks for any help.</p>