Good morning and Happy Fourth Of July. I’m currently using the eXist database and here is my Javascript.
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("*");
Coordinate = "<ellipse id = 'My_Ellipse'";
for (Counter = 0; Counter < 4; Counter++) {
Coordinate = Coordinate + " " + Attribute_List[Counter] + " = '" + Coordinate_List[Counter] + "'";}
Coordinate = Coordinate + ">";
document.getElementById("Image_Box").innerHTML = Coordinate;
}
};
SVG_Data.send();}
When I try to run my xhtml code, I get the following error:
uncaught typeerror. cannot read properties of undefined reading send.
I know that this involves my SVG_Ellipse variable. But what I don’t know is why I can’t access the send method. I could use some assistance.
Well presumably there’s more to it, because you only define Setup(), you didnt call it.
Are you certain that the line causing the error is SVG_Data.send()?}; before and the send line?
My XHTML code calls this function.
SVG Ellipse
Beyond that I’m not sure what you are asking me.
If the entirity of your code is the below:
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("*");
Coordinate = "<ellipse id = ‘My_Ellipse’";
for (Counter = 0; Counter < 4; Counter++) {
Coordinate = Coordinate + " " + Attribute_List[Counter] + " = ‘" + Coordinate_List[Counter] + "’";}
Coordinate = Coordinate + ">";
document.getElementById(“Image_Box”).innerHTML = Coordinate;
}
};
SVG_Data.send();
}
I don’t see how the send line would be acting on an undefined. Or why it would be trying to tell you that was a property …
I would strongly recommend to not use the old XMLHTTPRequest. Use fetch() instead. It’s much easier to use.
3 Likes
I noticed an error when I checked out my CSS file. I was wondering if it was affecting my javascript file. Here is my code:
#Image_Box {#My_Ellipse {
It says that the fill, stroke, and stroke-width properties are unknown. Would this affect my project?
I decided to run a few tests on my code and I definitely found a problem. I’m not sure how to fix it though. I changed my code to look like this:
#Ellipse_Data {
position: absolute;
height: 100px;
width: 300px;
top: 100px;
left: 100px;}
var SVG_Data;
var Retrieved_Data;
var Attribute_List;
var Coordinate_List;
var Counter;
function Setup() {
document.getElementById("Ellipse_Data").innerHTML = "I'm Here";
}
All three documents are in the same folder. It appears that the onload event isn’t working. I think that’s the problem I’ve been having all along. I really could use some assistance with this.
It took me most of the morning to make major changes to my code. But I finally fixed most of the problems. Here is my current Javascript code:
var SVG_Data;
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("*");
Coordinate = "<ellipse id = 'My_Ellipse'";
for (Counter = 0; Counter < 4; Counter++) {
Coordinate = Coordinate + " " + Attribute_List[Counter] + " = '" + Coordinate_List[Counter] + "'";}
Coordinate = Coordinate + ">";
document.getElementById("Ellipse_Data").value = Coordinate;
}
};
SVG_Data.send();}
I can retrieve the data from the eXist database and it displays correctly in my textbox. But for some reason my svg code doesn’t work. It should look like this:
But my computer still won’t display the ellipse. I don’t know why it’s not working correctly.
Did… you forget to put the Ellipse_Data SVG element into your html? It’s missing from your code in post 8. putting HTML inside an input element doesnt render the html.
Did you give the SVG a viewBox? Is the viewbox positioned to see the coordinate range of the ellipse?
