CODEWITHSUNDEEP
javascriptajaxhtmlimportinnerhtml
Devon Bernard
Devon Bernard

Reputation: 2300

Can't import javascript code with innerHTML

I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.

Main-page(index.php):

<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>

Child-page(loaded in div(graph.php)):

<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>

Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:

Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.

Upvotes: 0

Views: 1778

Answers (4)

wired_in
wired_in

Reputation: 2613

Note: The page you are loading (page2.html in this example) must be on the same domain as the page that is loading it (page1.html in this example)

Working solution with jQuery:

Page 1:

<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#page2").load("page2.html");
    });
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>

Page 2:

<h2>Page 2 Header</h2>

<script type="text/javascript">
    alert("Page 2 loaded and javascript executed!");
</script>

Upvotes: 0

Boaz
Boaz

Reputation: 20230

From you code snippets it seems you're looking to embed complete pages within the main page. If that's the case, a more straightforward approach would be to use an iframe element instead.

For example:

 ...
 <div id="main-page-container">
     <iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
 </div>
 ...

See reference and usage example.

Upvotes: 1

wired_in
wired_in

Reputation: 2613

Older browsers such as IE8 and below don't allow you insert a string that contains javascript and execute it, in any form.

Take for instance:

function addScriptText(js_code) {
    var element = document.createElement("script");
    element.innerHTML = js_code;
    document.head.appendChild(element);
}

will not work in IE8 and below.

You must use eval to accomplish this:

function addScriptText(js_code) {
    window.eval.call(window, js_code);
}

Otherwise you need to dynamically request an external js file such as:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);

Upvotes: 0

Nic
Nic

Reputation: 581

I would suggest using jQuery's .load() function for this.

Take a look here: jQuery API

Upvotes: 1

Related Questions