Nanonano Posted January 30, 2012 Share Posted January 30, 2012 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 30, 2012 Share Posted January 30, 2012 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? Link to comment Share on other sites More sharing options...
Nanonano Posted January 30, 2012 Author Share Posted January 30, 2012 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted January 30, 2012 Share Posted January 30, 2012 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? Link to comment Share on other sites More sharing options...
Nanonano Posted January 30, 2012 Author Share Posted January 30, 2012 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\" /> "; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.