Imported data from server cannot use / access javascript functions embedded in html file

Question

Im creating a web app that needs to do the following. 1) in index.html, it divided into div. one of the divs is used for navigation, the other div displays the data needed by the user depending on what he clicks in the navigation. It could be table or graph which is imported from the server.

2) The sample content imported from server is shown below. Obviously it is a table, but it needs javascript to be able to sort.

<table id="myTable" class="tablesorter">  <thead>  <tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th>  </tr>  </thead>  <tbody>  <tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td>  </tr>  <tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td>  </tr>  <tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td>  </tr>  <tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td>  </tr>  </tbody>  </table>

The problem is if I click the table button in the navigation area, It shows the table but it is not sorting. You can see the correct behavior of the table that Im aiming to do here in http://tablesorter.com/docs/#Demo .

Could anyone tell me what's wrong with this code and what do I need to do:

Client Page

<html>
<script type="text/javascript" src="static/path/to/widget-scroller.js"></script>       <script type="text/javascript" src="static/path/to/jquery-latest.js"></script>   
<script type="text/javascript" src="static/path/to/jquery.tablesorter.js"></script>     
<script type="text/javascript" src="static/path/to/jquery.tablesorter.widgets.js"></script>

    <script>    
       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");       
        }

       xmlhttp.onreadystatechange=function() {          
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
               document.getElementById("contents").innerHTML=xmlhttp.responseText;
            }
       }

       if (logtype == "Option1") {
          xmlhttp.open("GET","/Option1",true); 
          }
       else if (logtype == "Option2"){
          xmlhttp.open("GET","/Option2",true);
          }

          xmlhttp.send();   
         } 

       </script> 


   <body> 
  <div id="alldiv">

        <!--Banner Div-->       <div id="bannertable">
                    BANNER


                            </div>

        <div id = "container" >         <table id="holder">             <tr id="tr1">
                    <td id ="td1">
                        <div id = "nav">
                            <a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">   Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Show All</a>
                            <ul id="treemenu1" class="treeview">
                                <li>System
                                    <ul>
                                        <li>Monitoring</li>
                                    </ul>
                            >                                           <li><a href="#" onClick="loadTable('Option1')">Option1</a></li>
                                                <li><a href="#" onClick="loadTable('Option2')">Option2</a></li>

                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                            <script type="text/javascript">
                                ddtreemenu.createTree("treemenu1", true)
                            </script>
                        </div>
                    </td>
                    <td id = "td2">
                        <div id = "contents" class="contentdata">
                            tables
                        </div>
                    </td>           </tr>       </table>    </div> </div> 
</body> </html>

Please take note that table sorter functions properly if it is on an entirely different page with html tags, this tells me that nothing is wrong with the tablesorters code.

Im wondering If I reload the js files that the table need, will it function properly? What is the besst explanation and solution to this kind of scenario. Thank you.

Please simplify what you're asking and provide an [SSCCE](http://sscce.org/) (working and syntactically correct code) so we can reproduce your problem. As it is, it's hard to understand what you're asking. — brandonscript, Jan 14 '14 at 06:59
@remus I edited the question already. I think this is simplestvway of stating the problem. Thank you :) — srh snl, Jan 14 '14 at 07:22

score 0 · Accepted Answer · edited May 23 '17 at 10:25

I finally have an answer to this question.

What I did:

Put whatever data the server sends in a variable. And do the following

var data_from_server = xmlhttp.responseText;
$(#ID_OF_DIV).html(data_from_server);

then to solve the issue with javascript, include the script tags of JS files that you need in the data that you need from server, example:

Assuming this is the data that you will receive from server:

<table id="myTable" class="tablesorter">  <thead>  <tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th>  </tr>  </thead>  <tbody>  <tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td>  </tr  </tbody>  </table>

include the script tags that this table needs, so in that case, include these 2:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>  
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

You may also check this out reload javascript in a page once the content in the div is changed for other answers.

Imported data from server cannot use / access javascript functions embedded in html file

1 Answers1