0

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>
srh snl
  • 797
  • 1
  • 19
  • 42

4 Answers4

1

If you just want some javascript functions to be invoked after the content is retrieved use

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // play with xmlhttp.responseText; 
        then call your javascript functions here
    }}
Raunak Kathuria
  • 3,185
  • 1
  • 18
  • 27
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...");

KumarA
  • 1,368
  • 3
  • 18
  • 41
  • yes the goal is to update the div content. but the content of the div contains table tags, and that table needs js functions from the imported js files. the contents from server cannot access those js files for some reason, i want to know why? and how do i fix it? – srh snl Jan 15 '14 at 01:09
  • you can add/append your content with your html element – KumarA Jan 15 '14 at 03:58
  • this was able run some of the js files that I need some are still not working. DO you have any other suggestion or recommendation? – srh snl Jan 15 '14 at 05:41
  • AKumarthis was able to run some of the files that I need and some are still not working. I think its because of the $document.ready(); based on what I have read, what document.ready does is execute the statement after the DOM has finished loading. What can i do to fix this? Thanks – srh snl Jan 15 '14 at 06:20
  • you were very helpful. This $("#YOUR_DIV_ID").html("YOUR CONTENT HERE..."); solved a part of my problem. :) – srh snl Jan 17 '14 at 07:19
0

Since your div will be updated by an Ajax call. I think you can reload the javascript in the callback of the ajax call just after finishing manipulating the div content.

//reload script
var script = document.querySelectorAll('script[src=blabla.js]')[0]
script.parentNode.removeChild(script);

script = document.createElement('script');
script.type='text/javascript';
script.src='blabla.js';

document.head.appendChild(script);
gee
  • 72
  • 4
  • does this script refreshes the entire document? – srh snl Dec 18 '13 at 02:59
  • am I right that what this code does is, remove all tags with script, then create another script same as the one you deleted then, append it in the document, Am i right? because Im dealing with more than 20 js tags, Im not sure if this will be efficient. Anyway thanks :) – srh snl Dec 18 '13 at 03:03
  • It will not remove all script files, just the script file whose src is 'blabla.js' – gee Dec 18 '13 at 03:05
  • If you want to reload the js named my.js, just replace the blabla.js with my.js, the code will only reload that specific one script file and won't change any other javascript files – gee Dec 18 '13 at 03:06
0

Have you tried debugging with console.log()? Are the requests actually being sent (Chrome's network tab is good for monitoring this)?

I'm a little confused by the structure of your code. The responseText is only processed for IE5 and 6, and you try to do this before the request has been sent. Here's an example usage from MDN. The reqListener callback is where the action happens.

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

Unless IE5 support is essential, I'd recommend trying jQuery AJAX, which supports IE6+.

Jimeux
  • 2,956
  • 1
  • 18
  • 14
  • It's fine to use ajax call this way with native javascript, the responseText is not processed before request is send. It's not procedural flow, it check the status of response and then play with responseText. Reference http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery – Raunak Kathuria Dec 18 '13 at 03:08
  • Are you referring to the original code? You can see it doesn't respond here: http://jsfiddle.net/Yh8j6/ `responseText` should be processed in a callback, which can be done by moving the responseText code out of the IE5/6 block and putting it in an `onload` handler like in the MDN example above: http://jsfiddle.net/edzte/ (should display a 404 error). – Jimeux Dec 18 '13 at 04:31
  • I just realised you essentially posted the same thing above. I think this problem should be easily solved with your answer, so I upvoted it. – Jimeux Dec 18 '13 at 04:40
  • I was referring to the answer that I posted, may be added in short span of each other, that's why confusion :) thanks for upvote.. – Raunak Kathuria Dec 18 '13 at 05:11
  • @Jimeux Yes, Ive tried debugging the inspect element in mozilla. When I refresh the page, it calls (Get) all the javascript. When I click something to change the content of one the divs, it ONLY calls (Get) the contents that it needs from the server thats why the graph cant be seen in the client as its supposed to be seen. Do you think the code you posted above can do this? Thank you :) – srh snl Jan 13 '14 at 09:43