Solved

Dynamic SVG with Javascript and PHP

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

863 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

24 Experts available now in Live!

Get 1:1 Help Now