Solved

Dynamic SVG with Javascript and PHP

Posted on 2010-11-23
2
1,062 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:qvfps
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 

Author Comment

by:qvfps
ID: 34205993
I forgot to mention that the original example worked and I am viewing the page with Firefox 3.6.10
0
 

Accepted Solution

by:
qvfps earned 0 total points
ID: 34210129
If anyone is interested I think I found the issue.  I left off the following line appending the new element to the document.

documentSVG.documentElement.appendChild(fieldtGroup);
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question