jquery - reload javascript in a page once the content in the div is changed

Question

this is how my app works.

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?

Here's the 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");
            {
                document.getElementById("tables").innerHTML=xmlhttp.responseText;
                }
        }

        if (logtype == "XXX")
        {
            xmlhttp.open("GET","/con/chartUI",true);
        }

        xmlhttp.send();



    }
</script>  

html / navigation part (tables is the id of div that should display na charts and graph)

<div class="nav-collapse sidebar-nav">
                            <ul class="nav nav-tabs nav-stacked main-menu">
                                <li>
                                    <a class="dropmenu" href="#"> <font color="#6666FF">System</font> </a>
                                    <ul>
                                        <li><a class="submenu" href="#"><h2>&nbsp;&nbsp;&nbsp;&nbsp;Monitoring</h2></a></li>
                                    </ul>    
                                </li>
                                <li>
                                    <a class="dropmenu" href="#"><font color="#6666FF">Maintenance</font></a>
                                    <ul>
                                        <li>
                                            <a class="dropmenu" href="#"><h2>&nbsp;&nbsp;&nbsp;&nbsp;Logs</h2></a>
                                            <ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 1</h3></a></ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 2</h3></a></ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 3</h3></a></ul>
                                                <ul><a class="submenu" href="#" onClick="loadTable('XXX')"><h3>Option 4</h3></a></ul>
                                            </ul>
                                        </li>
                                    </ul>    
                                </li>
                            </ul>
                        </div>

Answer 1

You can use window.location.reload(); after updating your DIV content.

EDIT:

If you are updating your DIV content using Javascript/JQuery(AJAX) then no need to reload a page. I hope your ultimate requirement might be updating the DIV content.

Ex:

$("#YOUR_DIV_ID").html("YOUR CONTENT HERE...");