0

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:

  • Put eval() around my code [I saw on a guide that this could lead to malicious user attacks].
  • Create the scripts on the main page then just import the data using:
    • document.createElement() and .parentNode.insertBefore()
  • Create a listener and call the functions when I open graph.php
  • And this good example

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.

Improve this question
1
  • Well first things first, you are importing an entire page and placing it into a div, including the <html></html>. The page you request should only have the html that's supposed to go in the div. Commented Jan 5, 2013 at 22:36

4 Answers 4

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I have read over some debates of iframe vs div so I thought to just go with div because it was easier for me to find that documentation. But if I used this iframe technique to load different pages, would all the code on that page be exicuted before it is put onto the mainpage? So if I am getting it iframe opens a page runs everything then imports; while div just imports the page code? If I am mistaken please correct me.
inside of a div, you can't include an entire page with an html body. An iframe is like including completely separate page inside of it's own little window within your page. So the javascript within the iframe will execute, but in the context of it's own page, not yours.
If you mean the Javascript code, then yes, that would load automatically on the client-side within the browser, as it would with any web page. If you mean the PHP code, then that would be executed on the server-side before being served to the browser.
So div acts like it just imports the code from another page to make one big page; while and iframe knows the the other-page is separate and executes its code separately and loads the result onto the main page.
the page in the iframe is completely separate from your page, so that page's code isn't added to your page. Your main page simply has a reference to the page within iframe, and the iframe shows the page in a window on your page, giving it the illusion it is part of your page.
|
1

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

Take a look here: jQuery API

Improve this answer

2 Comments

So for this example I could use... $('#mydiv').load('graph.php'); And all of the java/php functions would be exituted on the graph.php page; then all of that data would be loaded into mydiv? Sorry I am not skilled with java; so the differences in .load and .innerHTML are not super apparent to me; but thanks and I will try to make this run in my code.
Yes, that should work. The PHP functions are executed to generate the output, the output is sent to the browser, where jQuery loads the output into your div and executes the JavaScript.
0

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);
Improve this answer

Comments

0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.