Jump to content
Sign in to follow this  
Nanonano

AJAX-like effect in SVG-document ?

Recommended Posts

Hello. I am very stuck at one point in my web-page project, and I hope that anyone of you can help me. In short, I'm trying to achieve an AJAX-like effect in a SVG-document. What I mean is that when the SVG-document (in my example below called SVGPage.php) has finished loading and is just sitting there waiting, I want to use AJAX on the click of an SVG-element (in my example the rectangle) to send a request to an external PHP-file (in my example called UpdateSVGPage.php).This "UpdateSVGPage.php" is building up SVG-code based on information from a database, and it will echo it back to the SVG-document via the same AJAX-request.The newly received SVG-code is deployed to a specific element in the SVG-code (in my example a <g>-element with the id="new_svg_shape"), and the new shape is instantly rendered and view-able on the SVG image.When the user clicks on the specific shape once again, the whole process should be repeated (meaning that a change in the database would create a different SVG-image). I have made an attempt below (which is not working), and I hope that my intentions are understandable. index.php

 <?phpsession_start();?><!DOCTYPE html><html>  <head>  </head>  <body>	  <embed src="SVGPage.php" type="image/svg+xml" width="1000px" height="1000px"/>  </body> </html>

UpdateSVGPage.php

 <?phpsession_start();   //get the q parameter from URL  $q=$_POST["input"];  	echo "<rect x=\"1200\" y=\"233\" width=\"80\" height=\"20\" fill=\"blue\" />"; ?> 

SVGPage.php

<?phpsession_start();header('Content-Type: image/svg+xml');print('<?xml version="1.0" standalone="no"?>');?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">  <script type="text/ecmascript" xlink:href="Library.js"/>   <script type="application/ecmascript" >	<![CDATA[	   function ajax_function(){		  var xmlhttp;		  if (window.XMLHttpRequest){			 xmlhttp=new XMLHttpRequest();		   }		   xmlhttp.onreadystatechange=function(input){			  if (xmlhttp.readyState==4 && xmlhttp.status==200){				 document.getElementById("new_svg_shape").firstChild.data=xmlhttp.responseXML;			  }		   }		  xmlhttp.open("POST","UpdateSVGPage.php?q="+input,true);		  xmlhttp.send();	   } 	]]>  </script>    <rect height="100" width="100" fill="blue" onclick="ajax_function()"> </rect>    <g id="new_svg_shape" /> </svg> 

A big thanks to anyone who might help me !

Edited by Nanonano

Share this post


Link to post
Share on other sites

Make sure to set the content type in the page that returns the SVG. Add some debugging to the ajax handlers to figure out what data is getting returned and if it's being handled correctly. Verify that responseXML contains the content, for example.

  • Like 1

Share this post


Link to post
Share on other sites

Hello, and thank you for answering. As you suggested, I added content type to UpdateSVGPage.php, like this:

  <?php  header('Content-Type: image/svg+xml');   //get the q parameter from URL  $q=$_POST["input"];   echo "<rect x=\"1200\" y=\"233\" width=\"80\" height=\"20\" fill=\"blue\" />";   ?> 

Then I checked in "Firebug" what happens when the ajax_function() is called:- The parameter which is sent to the UpdateSVGPage.php file is correct, if I send it.- The response headers content type is image/svg+xml, and the request headers content type is text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (whatever that means)- The response is

<rect x="1200" y="233" width="80" height="20" fill="blue" />

which is correct.- Then it complains about an error on this codeline:

document.getElementById("new_svg_shape").firstChild.data=xmlhttp.responseXML;

which is located in the SVGPage.php file. In aid for more info, I checked it also in chromes debugger, and that states that: - Uncaught TypeError: Cannot set property 'data' of null - xmlhttp.onreadystatechangeon the same line of code as Firebug whined about. Could someone help me with this debugging-info? I am not good at interpreting it.

Edited by Nanonano

Share this post


Link to post
Share on other sites

That means that firstChild is null, it does not have a data property. So that element does not have a first child.

Share this post


Link to post
Share on other sites

Ok, thank you. I changed that line of code to:

document.getElementById("new_svg_shape").data=xmlhttp.responseXML;

which got rid of the error. Great!However nothing happens. The code returned from the UpdateSVGPage.php file is correct (when I check it in Firebug), but nothing happens on the image itself. The code doesn't render. I tried to use the <svg> tag instead of the <g> tag, where the code is returned to, but still nothing happens.Any ideas?

Share this post


Link to post
Share on other sites

From the little that I've read online, you may need to traverse the XML structure that gets returned from the server and add each child node using the normal DOM methods for adding nodes. I can't find information on using a property called "data".

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...