Using Javascript (');` – Ultimater Jun 21 '16 at 05:10

Question

I'm not sure I understand why you want to include HTML pages with JavaScript. This is not very usual and there are probably other ways to do this. In any case if you insist on doing this you need to make sure, especially when doing this that you don't have a full document. So starter.html should look more like this:

        <p>Welcome to the homepage</p>

And page2.php should look more like this:

    <script>
        function leggo() {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.fillRect(0,0,100,100);
        }
    </script>
    <canvas id="canvas" width="200px" height="200px">HI</canvas>
    <script>
        leggo();
    </script>

Then you should add a call to the leggo() at in xhttp.onreadystatechange of loadPageBelow like this:

<html>
    <head>
        <script>
            function loadPageBelow(fileName) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    document.getElementById("content").innerHTML = xhttp.responseText;
                };
                xhttp.open("GET", fileName, true);
                xhttp.send();
            }
        </script>
    </head>
    <body>
        <p><b>THIS IS THE HEADER</b></p>
        <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a>
        <div id="content">
            <?php
                include("starter.html");
            ?>
        </div>
    </body>
</html>

Nicolas Bouvrette · Answer 1 · 2016-06-21T04:44:31.683

0

I'm not sure I understand why you want to include HTML pages with JavaScript. This is not very usual and there are probably other ways to do this. In any case if you insist on doing this you need to make sure, especially when doing this that you don't have a full document. So starter.html should look more like this:

        <p>Welcome to the homepage</p>

And page2.php should look more like this:

    <script>
        function leggo() {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.fillRect(0,0,100,100);
        }
    </script>
    <canvas id="canvas" width="200px" height="200px">HI</canvas>
    <script>
        leggo();
    </script>

Then you should add a call to the leggo() at in xhttp.onreadystatechange of loadPageBelow like this:

<html>
    <head>
        <script>
            function loadPageBelow(fileName) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    document.getElementById("content").innerHTML = xhttp.responseText;
                };
                xhttp.open("GET", fileName, true);
                xhttp.send();
            }
        </script>
    </head>
    <body>
        <p><b>THIS IS THE HEADER</b></p>
        <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a>
        <div id="content">
            <?php
                include("starter.html");
            ?>
        </div>
    </body>
</html>

edited Jun 21 '16 at 04:44

answered Jun 21 '16 at 04:05

Nicolas Bouvrette

2,903
1
23
43

Those files are pasted into the files I have and I still get an error "Can't find variable: leggo" - @NicolasBouvrette – orwinmc Jun 21 '16 at 04:39
@Jetstream5500 you are right, callback would not work given the function does not exist. I have updated with an other solution which does not require callback. – Nicolas Bouvrette Jun 21 '16 at 04:45
Still doesn't seem to work. Ill edit the question with what I have now so everyone is on the same page. If there is another way to do the Ajax that might be helpful as well? Little lost as it seems like a simple task - @NicolasBouvrette – orwinmc Jun 21 '16 at 04:52
@Jetstream5500 I honestly didn't test but it should be very close to be working. Do you see any error in your console? Do you see the script and Canvas when using Chrome's inspection? – Nicolas Bouvrette Jun 21 '16 at 04:55
The canvas definitely is there because I can add a border and it expands...just nothing draws. No errors in safari...dont know how to use chrome inspection but it looks as though it doesn't have the script for whatever reason but not sure - @NicolasBouvrette – orwinmc Jun 21 '16 at 05:00

score 0 · Answer 2 · answered Jun 21 '16 at 04:13

Since you are just loading content in the innerHTML of a div where the body has already been loaded , you should remove the and tags from starter.hml and page2.php . Also your script should be placed under all of your html markup . After you have done this , to initialize your leggo() function just add a document ready check.

Example

<script>

function leggo() {
                var ctx = document.getElementById('canvas').getContext('2d');
                ctx.fillRect(0,0,100,100);
  }

if(document.readyState == "complete"){

leggo()


}
</script>

I included that 'if statement' in the JS file and it still doesn't work (pasted). I'm assuming that would be the same affect as having it in in the tag so..no go? - @KpTheConstructor — orwinmc, Jun 21 '16 at 04:49

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

I'm going out on a limb and assume your HTML is not parsed and the leggo() function is searching for canvas with id of canvas. That element is not written yet as page is interpreting the response.

I'm not going to criticize your codes. I would suggest you to defer the script until the page loads in web browser. To do this, separate your leggo() function from HTML and into external JavaScript file then update the HTML <script> tag to include defer and src attributes.

If external script is not possible, I would suggest including jQuery onload function to detect whether contents have loaded.

If jQuery is not possible, then I would suggest following this thread to detect whether contents are loaded without using jQuery.

Suggested Alternative: heading.php

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadPageBelow(fileName) {
            this.document.location = "http://localhost/heading.php?page="+fileName;
        }
    </script>
</head>
<body>
    <p><b>THIS IS THE HEADER</b></p>
    <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a>
    <div id="content">
        <?php
            if(isset($_GET['page'])) {
                include($_GET['page']);
            } else {
                include("starter.html");
            }
        ?>
    </div>
</body>
</html>

edited May 23 '17 at 11:53

Community

1
1

answered Jun 21 '16 at 04:13

HI – orwinmc Jun 21 '16 at 04:42
I'm rather curious whether `page2.php` is loaded correctly. Could you try update to absolute URL for `page2.php` instead of passing a file name, i.e., `loadPageBelow('http://localhost:8000/page2.php')` or navigating to `http://localhost:8000/page2.php` and let us know what happened? – Jun 21 '16 at 05:43
It shows the canvas working...as expected, but there is no header and when u pass 'http://localhost:8000/page2.php' to loadPageBelow it crashes...as expected? - @jmsweb – orwinmc Jun 21 '16 at 12:27
Actually neither of the tests crash just they can't draw in the canvas (I made a typo) - @jmsweb – orwinmc Jun 21 '16 at 14:38
I'm sorry, I would have to change your structure to include files without calling AJAX because scripts cannot be executed through AJAX. This is my suggested alternative to your current structure. – Jun 21 '16 at 15:06
So if I change the structure so it just includes a header.php and footer.php for each subpage (allowing for refresh of pages), how do I do the subpage thing (aka index.php?page=home) - @jmsweb – orwinmc Jun 21 '16 at 15:24
I'll just have to deal with the page refresh rn I guess. By doing includes and just linking between pages the code works. I'll leave the question up for a little bit to see if there are any other ideas as to prevent page refresh - @jmsweb – orwinmc Jun 21 '16 at 15:34
If page refresh is a concern then you could modify the JavaScript to execute `e.preventDefault();` on submission. Although that is not the ideal solution especially as HTML templating. – Jun 21 '16 at 15:42

3 Answers3