Solved

Dynamic SVG with Javascript and PHP

Posted on 2010-11-23
2
1,053 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
  • 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now