Jump to content
Sign in to follow this  
Nanonano

How to? Clicking a shape in an embedded SVG-image collects data from a database (using PHP), and displays the data in the very same SVG-image?

Recommended Posts

Ok friends: I'm totally stuck, and I desperately need some guidance from you professionals. For the last couple of months I've been working on a web-page project.This is what I've got so far: - I've got a HTML5 page (index.php)- In this HTML5 page, I've got an embedded SVG-file, which is converted to a PHP-file (drawing.php)- It is converted to PHP, because it uses some data in a database to decide what the SVG-image should look like.- In this SVG-file, a PHP-script builds some graphics, and applies some animations to it.- The SVG-file also has a javascript-library attached to it, which I need for zooming and panning the SVG-image. Everything is fine so far, however now starts the problems:I've got some other data in my database, which is supposed to be displayed on the SVG-image only after the user clicks on a specific shape belonging to the SVG-image. The only possible way I could imagine this to work would be to use AJAX, however I have no idea how to use AJAX together with an embedded SVG-file.Googling for days hasn't help me too much either. I would be very grateful to anyone who could provide some help. :Pleased:

Share this post


Link to post
Share on other sites

Ajax is just regular Javascript, you can use it anywhere you can use any other Javascript code. Do you have click events on the shapes you're supposed to click on that execute some function when you click?

Share this post


Link to post
Share on other sites

Hello, and thank you for answering so fast! That could be an option when a shape is clicked it initiate a JS-function which took care of the AJAX business, but I think I tried that and couldn't figure out how to put the received data from the database into the right element. Could you help me with that line of code? *** Edited later, now working *** index.php

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

drawing.svg

<?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)	 {// code for IE7+, Firefox, Chrome, Opera, Safari	 xmlhttp=new XMLHttpRequest();	  }	  xmlhttp.onreadystatechange=function()	 {	 if (xmlhttp.readyState==4 && xmlhttp.status==200)	  {	 document.getElementById("display_data").firstChild.data=xmlhttp.responseText;	  }   }xmlhttp.open("GET","connect_to_database.php",true);xmlhttp.send();}]]></script> <?php /* some PHP code is building the SVG-image here */ ?> <rect id="trigger" width="100" height="50" fill="black" onclick="ajax_function()">	<animateTransform id="scaledown" attributeName="transform" attributeType="XML"					type="scale" from="1" to="3" begin="display_data.click" dur="1s"					additive="replace" fill="freeze"/></rect>  <text id="display_data" y="100" width="100" height="50" fill="black" ></text> </svg> 

Edited by Nanonano

Share this post


Link to post
Share on other sites

I don't work much with SVG, do SVG elements have an innerHTML property or should you be using something else? Have you verified that document.getElementById is returning a reference to the correct SVG element?

Share this post


Link to post
Share on other sites

You were right, innerHTML does not work in SVG. I changed the code in my last post above, so now it's working when I return the AJAX-stuff to a SVG-text-tag. What I now need is a way to return pure SVG-code via AJAX, and put it somewhere inside the SVG-tags.So that new shapes are created after the AJAX-call.I've made an attempt under, but it doesn't seem to work as expected. I hope that someone can correct me. drawing.svg

<?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)	 {// code for IE7+, Firefox, Chrome, Opera, Safari	 xmlhttp=new XMLHttpRequest();	  }	  xmlhttp.onreadystatechange=function()	 {	 if (xmlhttp.readyState==4 && xmlhttp.status==200)	  {	 document.getElementById("display_data").firstChild.data=xmlhttp.responseText;	  }     }    xmlhttp.open("GET","connect_to_database.php",true);    xmlhttp.send();   }  ]]>  </script>   <rect id="trigger" width="100" height="50" fill="black" onclick="ajax_function()" />   <g id="display_data" />   <!-- Somehow the pure SVG-code returned from connect_to_database.php should be put in here --> </svg> 

connect_to_database.php

echo "<rect x=\"100\" y=\"100\" width=\"50\" height=\"20\" /> ";

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...