speedlearner Posted September 3, 2015 Share Posted September 3, 2015 I'm using the eXist database program. I stored the following documents inside the HTML_Student collection: SVG_Ellipse.html <html xmlns="http://www.TedTheSpeedlearner.com" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com XML_SVG_Ladder.xsd"> <head> <title>SVG Ellipse</title> <link rel="stylesheet" type="text/css" href="http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.css"/> <script language="javascript" src="http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse_Test_1.js"/> </head> <body onload="Setup()"> <svg:svg id="Image_Box"> <svg:ellipse id="My_Ellipse"/> </svg:svg> <input id="My_Data" type="text"/> </body> </html> Please note that the schema document that is listed in this document doesn't exist yet. I will create this later. SVG_Ellipse.css #Image_Box { height: 500px; width: 800px;} #My_Ellipse { fill: none; stroke: blue; stroke-width: 3;} SVG_Ellipse_Test_1.js var SVG_Data var Retrieved_Data var Attribute_List var Coordinate_List var Counter function Setup() { SVG_Data = new XMLHttpRequest(); SVG_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.xq", true); SVG_Data.onreadystatechange = function () { if (SVG_Data.readyState = 4) { Retrieved_Data = SVG_Data.responseText; Retrieved_Data = Retrieved_Data.split("*"); Attribute_List = ""; Coordinate_List = ""; for (Counter = 0; Counter < 8; Counter++) { Attribute_List = Attribute_List + Retrieved_Data[Counter] + "*"; Counter = Counter + 1; Coordinate_List = Coordinate_List + Retrieved_Data[Counter] + "*";} Attribute_List = Attribute_List.split("*"); Coordinate_List = Coordinate_List.split("*"); for (Counter = 0; Counter < 4; Counter++){ document.getElementById("My_Ellipse").setAttribute(Attribute_List[Counter], Coordinate_Pair[Counter]);} document.getElementById("My_Data").value = Coordinate_List [0]; } } SVG_Data.send(); } SVG_Ellipse.xml <SVG_Data_Collection xmlns="http://www.TedTheSpeedlearner.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com SVG_Ellipse_Data_Schema.xsd"> <ellipse> <X_Center_Coordinate>100</X_Center_Coordinate> <Y_Center_Coordinate>100</Y_Center_Coordinate> <X_Radius_Coordinate>40</X_Radius_Coordinate> <Y_Radius_Coordinate>40</Y_Radius_Coordinate> </ellipse> </SVG_Data_Collection> SVG_Ellipse_Data_Schema.xsd <schema xmlns="http://www.w3.org/2001/XMLSchema" xmlns:target="http://www.TedTheSpeedlearner.com" targetNamespace="http://www.TedTheSpeedlearner.com" elementFormDefault="qualified"> <complexType name="Ellipse_Type"> <sequence> <element name="X_Center_Coordinate" type="string"/> <element name="Y_Center_Coordinate" type="string"/> <element name="X_Radius_Coordinate" type="string"/> <element name="Y_Radius_Coordinate" type="string"/> </sequence> </complexType> <element name="SVG_Data_Collection"> <complexType> <sequence> <element name="ellipse" type="target:Ellipse_Type"/> </sequence> </complexType> </element> </schema> SVG_Ellipse.xq xquery version "3.0"; declare default element namespace "http://www.TedTheSpeedlearner.com"; declare option exist:serialize "method=text media-type=text/plain"; let $header-addition := response:set-header("Access-Control-Allow-Origin","*") let $doc := doc("SVG_Ellipse.xml") let $svg-data := $doc/SVG_Data_Collection/ellipse let $First_Data_Name := $svg-data/X_Center_Coordinate let $Data := concat("cx*",$First_Data_Name, "*") let $Second_Data_Name := $svg-data/Y_Center_Coordinate let $Data := concat($Data, "cy*",$Second_Data_Name, "*") let $Third_Data_Name := $svg-data/X_Radius_Coordinate let $Data := concat($Data, "rx*",$Third_Data_Name, "*") let $Fourth_Data_Name := $svg-data/Y_Radius_Coordinate let $Data := concat($Data, "ry*",$Fourth_Data_Name) return $Data When I enter http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.html into the address of my web browser, the textbox appears and the coordinate number appears in the textbox. However, the ellipse doesn't appear. I tried to remove the set attribute command from the Javascript document and place the coordinates directly inside the ellipse element of my html document, but nothing changed. Why won't my ellipse appear? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 3, 2015 Share Posted September 3, 2015 Check your browser's error console, you should be getting at least 1 Javascript error.Also, when posting code please use code tags to make it easier to read. Link to comment Share on other sites More sharing options...
speedlearner Posted September 4, 2015 Author Share Posted September 4, 2015 I found one error and corrected it. In the Javascript code I have two for next loops. In the second for next loop I listed Coordinate_Pair instead of Coordinate_List. I'm unable to locate the second error. It says: Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. What is this error? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2015 Share Posted September 4, 2015 It sounds like you're telling it to set an attribute with a blank name. Link to comment Share on other sites More sharing options...
speedlearner Posted September 4, 2015 Author Share Posted September 4, 2015 I changed a few things in my Javascript document. I removed the for next loop and replaced it with the following code: document.getElementById("My_Ellipse").setAttribute("cx", "100"); document.getElementById("My_Ellipse").setAttribute("cy", "100"); document.getElementById("My_Ellipse").setAttribute("rx", "40"); document.getElementById("My_Ellipse").setAttribute("ry", "40"); I verified that the computer was setting the attributes by using the getAttriibute command. I also changed my html document into an XHTML document. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com XML_SVG_Ladder.xsd"> After I made the changes, I opened the webpage. Still the ellipse didn't appear on my webpage. I have no idea why. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2015 Share Posted September 4, 2015 I'm not really sure what's going on here either, you're using 6 files to try to draw an ellipse. I would start with a single HTML file that does what you want and break it up from there if you want to use XML, XSD, and XQ files, and I would remove eXist from the equation and just start with a regular static HTML file. Once you get that working then you can start adding your other pieces if you want to. Right now this has so many moving parts to do something relatively simple that I don't know where it's failing.Also, Javascript doesn't have "for next" loops, it's just a for loop. VBScript uses "next", not Javascript. Link to comment Share on other sites More sharing options...
speedlearner Posted September 5, 2015 Author Share Posted September 5, 2015 I've isolated the problem. I created a new HTML document. SVG_Ellipse_1.html <html> <head> <title>SVG Ellipse</title> <link rel = "stylesheet" type = "text/css" href = "http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.css"> </link> <script language = "javascript" src = "http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse_Test_2.js"> </script> </head> <body onload = "Setup()"> <svg id = "Image_Box"> <ellipse id = "My_Ellipse"> </ellipse> </svg> <input id = "My_Data" type = "text"> </input> </body> </html> Notice this document has no namespaces. I also created a new Javascript document. SVG_Ellipse_Test_2.js function Setup() { SVG_Data = new XMLHttpRequest(); SVG_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.xq", true); SVG_Data.onreadystatechange = function () { if (SVG_Data.readyState = 4) { Retrieved_Data = SVG_Data.responseText; Retrieved_Data = Retrieved_Data.split("*"); Attribute_List = ""; Coordinate_List = ""; for (Counter = 0; Counter < 8; Counter++) { Attribute_List = Attribute_List + Retrieved_Data[Counter] + "*"; Counter = Counter + 1; Coordinate_List = Coordinate_List + Retrieved_Data[Counter] + "*";} Attribute_List = Attribute_List.split("*"); Coordinate_List = Coordinate_List.split("*"); document.getElementById("My_Ellipse").setAttribute("cx", "100"); document.getElementById("My_Ellipse").setAttribute("cy", "100"); document.getElementById("My_Ellipse").setAttribute("rx", "30"); document.getElementById("My_Ellipse").setAttribute("ry", "80"); document.getElementById("My_Data").value = document.getElementById("My_Ellipse").getAttribute("cx"); } } SVG_Data.send(); } When I did this, everything worked fine. I will try to add namespaces to my html document in the next couple of days. Could namespaces cause my webpage not to work. And if so, why? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 8, 2015 Share Posted September 8, 2015 Well, add a namespace to that and see if it breaks it. I would also recommend using an HTML 5 doctype. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now