Dynamic SVG with Javascript and PHP

I am trying to create a simple page with a SVG image which I can update.   I was trying to modify an example from AJAX and PHP Building Responsive Web Applications.   I used the basic files supplied in the example to create a simple page with a couple of squares on it.   However all I ever get is the text included in the original SVG image.  

The project is made up of 5 files.   They include:
field.html which is the html page to view,
field.svg which is the basic SVG image with the text which I can get to display,
ajaxRequest.js which handles the XMLHttpRequest object,
field.js which updates the SVG image
field.php which updates the headers.

When I view field.html I get a page with 'test field creation' on it and nothing else.   It keeps refreshing which is what it is supposed to do but no other objects ever appear.

I am running firebug and I show no errors in the javascript portions of it and In the php file I send a message to the error log so I know it keeps calling it.  

Any suggestions would be appreciated.
//    File ajaxRequest.js

var xmlHttp = null; 

function createXmlHttpRequestObject() 
  var xmlHttp;
    xmlHttp = new XMLHttpRequest();
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) 
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      catch (e) {}
  if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
    return xmlHttp;

function ajaxRequest(url, callback)
  var innerCallback = callback;
  if (!xmlHttp) xmlHttp = createXmlHttpRequestObject();
  if (xmlHttp && (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)) 
    xmlHttp.onreadystatechange = handleGettingResults;
    xmlHttp.open("GET", url, true);
    setTimeout("ajaxRequest(url,callback)", 1000);
  function handleGettingResults() 
    if (xmlHttp.readyState == 4) 
      if (xmlHttp.status == 200) 
        alert("Couldn't connect to server");

Open in new window

//   File field.php

error_log("Got to field.php " ,0);
header('Expires: Fri, 25 Dec 1980 00:00:00 GMT'); // time in the past
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT'); 
header('Cache-Control: no-cache, must-revalidate'); 
header('Pragma: no-cache');
$pathText = '<path d="M400,600 L450,550 400,500 350,550  z" stroke="blue" fill="darkblue" stroke-width="4" />'; 
echo $pathText ;
echo "M400,600 L450,550 400,500 350,550  z";


Open in new window

//  File field.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    <title>Test Dynamic SVG</title>
    <embed src="field.svg" width="800" height="600" type="image/svg+xml" />

Open in new window

//    File field.js

var svgNS = "http://www.w3.org/2000/svg";
var documentSVG = null;
var fieldGroup = null;
var updateInterval = 1000; 
var height = 600, width = 800;
var currentNodeInfo;
var fieldGroup, dataGroup, dataPath, basePath;

function init(evt) 
  documentSVG = evt.target.ownerDocument;
  fieldGroup = documentSVG.createElementNS(svgNS, "g");
  baseGroup = documentSVG.createElementNS(svgNS, "g");
  basePath = documentSVG.createElementNS(svgNS, "path");
  basePath.setAttribute("stroke", "black"); 
  basePath.setAttribute("stroke-width", "2");
  pathText = "M400,600 L450,550 400,500 350,550  z"; 
  basePath.setAttribute("d", pathText); 
  setTimeout("updateSVG()", updateInterval);

function addOBJ(tIn) 
var myPath = documentSVG.createElementNS(svgNS, "path");
myPath.setAttribute("d","M100,100 L200,200 200,100 100,200 z");
    basePath.setAttribute("d", "M100,100 L200,200 200,100 100,200 z");

function updateSVG()
  if (window.getURL)
    getURL("field.php", handleResults);
    ajaxRequest("field.php" , handleResults);

function handleResults(data) 
  if (window.getURL)
    responseText = data.content;
    responseText = data; 
  setTimeout("updateSVG()", updateInterval)	

Open in new window

//   file field.svg

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
<script type="text/ecmascript" xlink:href="ajaxRequest.js"/>
<script type="text/ecmascript" xlink:href="field.js"/>
<text x="200" y="200"> test field creation </text>

Open in new window

Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

qvfpsConnect With a Mentor Author Commented:
If anyone is interested I think I found the issue.  I left off the following line appending the new element to the document.

qvfpsAuthor Commented:
I forgot to mention that the original example worked and I am viewing the page with Firefox 3.6.10
All Courses

From novice to tech pro — start learning today.