CODEWITHSUNDEEP
javascripthtml
braun shedd
braun shedd

Reputation: 1

Javascript pastes the html into itself?

Ok, it sounds kind of weird, but here is what I'm dealing with. On my website, when I try to load it, there is nothing in the body tags. When I look at the chrome developer console, it stops after fetching the stylesheet, but inside my ajax.js file is all of the html that goes inside the body. The contents of the ajax.js file definitely does not contain the body of my HTML, so why is it showing up there? Here is what shows up: :( cant post an image This is the html:

<?php
    $_SESSION['frameStart'] = $_POST['frameStart'];
    $_SESSION['frameStop'] = $_POST['frameStop'];
    $_SESSION['format'] = $_POST['format'];
    $_SESSION['currFrame'] = $_POST['frameStart'] - 1;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenRender - Free Online Rendering</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <script type="text/javascript" src="ajaxz.js" />
        <?php flush(); ?>
    </head>
    <body>
        <div id="content" >
            <img src="images/logo.png" alt="OpenRender logo" id="logo" class="centerMargin" />
            <h1 id="topInfo">
                Site Version: 1.0<span id="space" />Backend:
                <?php
                    if (file_get_contents("/blend/online") == 0) {
                        echo '<span id="green">Online</span>
                        <img src="images/greenlight.png" alt="green light" id="light" />';
                    } else {
                        echo '<span id="red">Offline</span>
                        <img src="images/redlight.png" alt="red light" id="light" />';
                    }
                ?>
            </h1>
            <div id="innerBox">
                <h1 id="status">
                    Your JavaScript is turned off
                </h1>
                <div id="controlPanel">
                    <a href="">
                        <img src="images/play.png" alt="play" id="play" />
                    </a>
                    <a href="">
                        <img src="images/stop.png" alt="stop" id="stop" />
                    </a>
                    <a href="">
                        <img src="images/info.png" alt="info" id="info" />
                    </a>
                </div>
                <img src="images/scene.png" alt="Thumbnail of rendered picture" id="thumbnail" class="centerMargin" />
                <h2 id="frameNumber">
                    Frame: 0/0
                </h2>
                <img src="images/loading.gif" alt="loading" id="loading" class="centerMargin" />
                <a href="images/song.mp4" target="_blank">
                    <img src="images/song.png" alt="sound" id="sound" />
                </a>
            </div>
            <div id="bottomBar">
               <a href="http://www.facebook.com/pages/OpenRender/107428762671996" target="_blank">
                    <img src="images/facebook.png" alt="facebook" id="facebook" />
                </a>
                <a href="http://twitter.com/#!/openrender" target="_blank">
                <img src="images/twitter.png" alt="twitter" id="twitter" />
                </a>
                <p id="emailText">
                    Contact us at:<br />
                    [email protected]
                </p>
                <p id="creditText">
                    Created by: Braun and Marc<br />
                    Donations: Facetime Inc.
                </p>
           </div>
        </div>
    </body>
</html>

The javascript file:

window.onload = function(){init();}

function init() {
    var ajax = ajaxInit();
    ajax.onreadystatechange = update(ajax);
    ajaxContact(ajax);
    setInterval("ajaxContact('"+ajax+"')",1000);
}

function ajaxInit() {
    if (window.XMLHttpRequest) {
      ajax = new XMLHttpRequest();
    }
    if (window.ActiveXObject) {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (ajax) {
        document.getElementById("status").innerHTML = "AJAX initialized";
        return ajax;
    }
    else {
        docuement.getElementById("status").innerHTML = "Error: AJAX not available";
        return false;
    }

}

function ajaxContact(ajax) {
    try {
        ajax.open("GET","Ajax.php?" + "&ran=" + Math.random(),true);
        ajax.send();
    }
    catch (err) {
        document.getElementById("status").innerHTML = "Error contacting server";
        document.getElementById("loading").src = "images/redx.png";
    }
}

function update(ajax) {
      if (ajax.readyState==4 && ajax.status==200){
          var dataObj = jsonTranslate();
          document.getElementById("status").innerHTML = dataObj.status;
          document.getElementById("frame").innerHTML =
          "Frame:" + dataObj.firstFrame + "/" + dataObj.lastFrame;
          document.getElementById("thumbnail").src = dataObj.imgSrc;
      }
      if (ajax.status==404) {
          document.getElementById("status").innerHTML = "Ajax updater not found";
          document.getElementById("loading").src = "images/redx.png";
      }
}

function jsonTranslate() {
    return eval('(' + ajax.responseText + ')');
}

Upvotes: 0

Views: 118

Answers (2)

grodzi
grodzi

Reputation: 5703

not sure that will work after but some suggestions : 

ajax.onreadystatechange = update(ajax);

Here is a first problem. If you can't for x reasons construct your xmlhttprequest, ajax will be undefined and you'll get an error. So before binding onreadystatechange, you should check if(ajax). By the way, with the above syntax a call is done to the function update (even though the readystatechange is not triggered). Moreover, the result you bind is not a function but what returns the function update : undefined. You may prefere the following syntax

ajax.onreadystatechange = update;
function update(){
    var ajax = arguments[0];
}

or

ajax.onreadystatechange = function(){return function(ajax){ update(ajax); }}();
function update(ajax){
    //like before
}

As for the callback, you may retrieve the server's answer with ajax.responseText; but that still won't be json...but html...

Upvotes: 0

RobG
RobG

Reputation: 147403

Get rid of the PHP stuff, show only what turns up in the browser. If nothing is turning up in the browser, likely you have PHP problem, not a javascript problem.

You should probably be using HTML, not XHTML.

You should probably not be using:

<script type="text/javascript" src="ajaxz.js" />

A closing tag is required, browsers may not like the SHORTAG version (your server may be changing that to <script...></script>, but we don't know that).

Upvotes: 3

Related Questions