title: reload javascript in a page once the content in the div is changed
body: <p>this is how my app works.</p>
  
  <p>I have a navigation  bar, once I click a link from the bar, one particular part of the page (div) will change its content (ajax). Most of the contents are graphs and tables and uses css and javascript. The problem is, the effect of the js is not shown/used whenever I click the links. I figured that the js should be reload everytime the content of the div is changed. how do I do that?</p>
  
  <p>Here's the script.</p>
  
  <pre><code>&lt;script&gt;
      function loadTable(logtype)
      {
          var xmlhttp;
          if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
          }
          else
          {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              {
                  document.getElementById("tables").innerHTML=xmlhttp.responseText;
                  }
          }
  
          if (logtype == "XXX")
          {
              xmlhttp.open("GET","/con/chartUI",true);
          }
  
          xmlhttp.send();
  
  
  
      }
  &lt;/script&gt;  
  </code></pre>
  
  <p>html / navigation part
  (tables is the id of div that should display na charts and graph)</p>
  
  <pre><code>&lt;div class="nav-collapse sidebar-nav"&gt;
                              &lt;ul class="nav nav-tabs nav-stacked main-menu"&gt;
                                  &lt;li&gt;
                                      &lt;a class="dropmenu" href="#"&gt; &lt;font color="#6666FF"&gt;System&lt;/font&gt; &lt;/a&gt;
                                      &lt;ul&gt;
                                          &lt;li&gt;&lt;a class="submenu" href="#"&gt;&lt;h2&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Monitoring&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;    
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a class="dropmenu" href="#"&gt;&lt;font color="#6666FF"&gt;Maintenance&lt;/font&gt;&lt;/a&gt;
                                      &lt;ul&gt;
                                          &lt;li&gt;
                                              &lt;a class="dropmenu" href="#"&gt;&lt;h2&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Logs&lt;/h2&gt;&lt;/a&gt;
                                              &lt;ul&gt;
                                                  &lt;ul&gt;&lt;a class="submenu" href="#" onClick="loadTable('XXX')"&gt;&lt;h3&gt;Option 1&lt;/h3&gt;&lt;/a&gt;&lt;/ul&gt;
                                                  &lt;ul&gt;&lt;a class="submenu" href="#" onClick="loadTable('XXX')"&gt;&lt;h3&gt;Option 2&lt;/h3&gt;&lt;/a&gt;&lt;/ul&gt;
                                                  &lt;ul&gt;&lt;a class="submenu" href="#" onClick="loadTable('XXX')"&gt;&lt;h3&gt;Option 3&lt;/h3&gt;&lt;/a&gt;&lt;/ul&gt;
                                                  &lt;ul&gt;&lt;a class="submenu" href="#" onClick="loadTable('XXX')"&gt;&lt;h3&gt;Option 4&lt;/h3&gt;&lt;/a&gt;&lt;/ul&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;    
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
  </code></pre>