asked on

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;
  try
  {
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                    "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP");
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) 
    {
      try 
      { 
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      } 
      catch (e) {}
    }
  }
  if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
  else 
    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);
    xmlHttp.send(null);
  }
  else
    setTimeout("ajaxRequest(url,callback)", 1000);
  
  function handleGettingResults() 
  {
    if (xmlHttp.readyState == 4) 
    {
      if (xmlHttp.status == 200) 
      {
        innerCallback(xmlHttp.responseText)
      } 
      else
      {
        alert("Couldn't connect to server");
      }
    }
  }
}

Open in new window

//   File field.php



<?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" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Test Dynamic SVG</title>
  </head>  
  <body>
    <embed src="field.svg" width="800" height="600" type="image/svg+xml" />
  </body>
</html>

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); 
  fieldGroup.appendChild(basePath);
  setTimeout("updateSVG()", updateInterval);
}

function addOBJ(tIn) 
{
var myPath = documentSVG.createElementNS(svgNS, "path");
myPath.setAttribute("d","M100,100 L200,200 200,100 100,200 z");
myPath.setAttribute("fill","blue");
myPath.setAttribute("stroke","2");
fieldGroup.appendChild(myPath);
    basePath.setAttribute("d", "M100,100 L200,200 200,100 100,200 z");
}



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


function handleResults(data) 
{
  if (window.getURL)
    responseText = data.content;
  else
    responseText = data; 
  addOBJ(responseText);  
  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>
</svg>

Open in new window

qvfps

ASKER

I forgot to mention that the original example worked and I am viewing the page with Firefox 3.6.10

ASKER CERTIFIED SOLUTION

qvfps

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial