Solved

Dynamic SVG with Javascript and PHP

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

627 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