Create Element in Firefox

[Sunny]

Hi,

I am creating an Element on page in Firefox.
But It gives me an error in Firefox.
String contains an invalid character" code: "5
[Break on this error] county[c] = document.createElement('"' +
countyVMLtext + '"');
I am adding a SVG shape to the page.

Here is the Shape :
<svg viewBox="555 322 56 53" height="53px" width="56px"
style="position: absolute; left: 555px; top: 322px; z-index: 1000;"
overflow="visible" version="1.1"><path fill-rule="evenodd" fill-
opacity="1" fill="#FFFFFF" stroke-width="1px" stroke-opacity="0.6"
stroke="#0000ff" d="M598,328 L602,327 L605,323 L607,328 L610,328
L607,338 L602,349 L603,354 L600,367 L556,374 L560,363 L559,353
L565,342 L565,336 L564,334 L598,328" stroke-linecap="round" stroke-
linejoin="round"></path></svg>

Here is my Javascript:

var shps = document.getElementsByTagName("svg");
lastshp = shps.length
shps2 = shps.item(0).parentNode
var resptext = req.responseText
countyVMLArray = resptext.split("<svg")
for(var c=1; c!= countyVMLArray.length; ++c){
color = "#FFFFFF"

countyVMLtext = "<svg" + countyVMLArray[c]
alert(countyVMLtext);
county[c] = document.createElement('"' + countyVMLtext + '"');
shps2.appendChild(county[c]);
county[c].setAttribute("fillcolor", "#FF8040");
}
lastshp = shps.length

*******************************************************************************
I am loading this shapes from xml file. XML is loading properly. And
the code works in IE Fine but not in Firefox
Why?

 

[Martin Honnen]

I am creating an Element on page in Firefox.
But It gives me an error in Firefox.
String contains an invalid character" code: "5
[Break on this error] county[c] = document.createElement('"' +
countyVMLtext + '"');

createElement takes an element name and an element name is not allowed
to contain a double quote character ". So doing
document.createElement('"' + countyVMLtext + '"')
is nonsense as that will construct an element name as the argument to
createElement that starts and ends with a double quote.
Additionally, if you want to create SVG elements then you need the W3C
DOM Level 2 namespace aware method createElementNS e.g.
var svgEl = document.createElementNS('http://www.w3.org/2000/svg',
'svg');

Here is the Shape :
<svg viewBox="555 322 56 53" height="53px" width="56px"
style="position: absolute; left: 555px; top: 322px; z-index: 1000;"
overflow="visible" version="1.1"><path fill-rule="evenodd" fill-
opacity="1" fill="#FFFFFF" stroke-width="1px" stroke-opacity="0.6"
stroke="#0000ff" d="M598,328 L602,327 L605,323 L607,328 L610,328
L607,338 L602,349 L603,354 L600,367 L556,374 L560,363 L559,353
L565,342 L565,336 L564,334 L598,328" stroke-linecap="round" stroke-
linejoin="round"></path></svg>

If you have a string with XML markup then you can't pass that to
createElement or createElementNS, instead with Firefox/Mozilla you need
to use DOMParser e.g.
var doc = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg', 'application/xml');

someElement.appendChild(someElement.ownerDocument.importNode(doc.documentElement,
true));

 

[Sunny]

I am creating an Element on page in Firefox.
But It gives me an error in Firefox.
String contains an invalid character" code: "5
[Break on this error] county[c] = document.createElement('"' +
countyVMLtext + '"');

createElement takes an element name and an element name is not allowed
to contain a double quote character ". So doing
document.createElement('"' + countyVMLtext + '"')
is nonsense as that will construct an element name as the argument to
createElement that starts and ends with a double quote.
Additionally, if you want to create SVG elements then you need the W3C
DOM Level 2 namespace aware method createElementNS e.g.
var svgEl = document.createElementNS('http://www.w3.org/2000/svg',
'svg');

Here is the Shape :
<svg viewBox="555 322 56 53" height="53px" width="56px"
style="position: absolute; left: 555px; top: 322px; z-index: 1000;"
overflow="visible" version="1.1"><path fill-rule="evenodd" fill-
opacity="1" fill="#FFFFFF" stroke-width="1px" stroke-opacity="0.6"
stroke="#0000ff" d="M598,328 L602,327 L605,323 L607,328 L610,328
L607,338 L602,349 L603,354 L600,367 L556,374 L560,363 L559,353
L565,342 L565,336 L564,334 L598,328" stroke-linecap="round" stroke-
linejoin="round"></path></svg>

If you have a string with XML markup then you can't pass that to
createElement or createElementNS, instead with Firefox/Mozilla you need
to use DOMParser e.g.
var doc = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg', 'application/xml');

someElement.appendChild(someElement.ownerDocument.importNode(doc.documentElement,
true));

Hi, I tried using document.createElement(countyVMLtext) &
document.createElementNS('http://www.w3.org/2000/svg',countyVMLtext);

But still gives the error "String contains an invalid character" code:
"5"
And when I try:
var doc2 = new DOMParser().parseFromString(countyVMLtext,
'application/xml');
shps2.appendChild(shps2.ownerDocument.importNode(doc2.documentElement,true));

It dont give any error but it dont paint the shape too.
Please help.

 

[Martin Honnen]

Hi, I tried using document.createElement(countyVMLtext) &
document.createElementNS('http://www.w3.org/2000/svg',countyVMLtext);

Well I gave you an example of an element name: 'svg'. I don't know what
countyXMLtext has as its value but you need to pass in an element name
like 'svg' or 'circle' and not markup.

And when I try:
var doc2 = new DOMParser().parseFromString(countyVMLtext,
'application/xml');
shps2.appendChild(shps2.ownerDocument.importNode(doc2.documentElement,true));

It dont give any error but it dont paint the shape too.

I gave you an example of a proper SVG fragment string too with the SVG
namespace being present:

var doc = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg>', 'application/xml');

document.body.appendChild(document.body.ownerDocument.importNode(doc.documentElement,
true));

So make sure your markup that is supposed to be SVG has the proper
namespace, otherwise the XML parser will not recognize it as SVG and
will not build SVG DOM elements to be rendered as shapes.

 

[Sunny]

Well I gave you an example of an element name: 'svg'. I don't know what
countyXMLtext has as its value but you need to pass in an element name
like 'svg' or 'circle' and not markup.



I gave you an example of a proper SVG fragment string too with the SVG
namespace being present:

var doc = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100"
r="20" fill="green"/></svg>', 'application/xml');

document.body.appendChild(document.body.ownerDocument.importNode(doc.documentElement,
true));

So make sure your markup that is supposed to be SVG has the proper
namespace, otherwise the XML parser will not recognize it as SVG and
will not build SVG DOM elements to be rendered as shapes.

Hi Martin,

I am able to create the svg objects on the web page now.
Thanks for ur Help.
Is there any way I can attach events to the elements & change opacity.
Here is the code so far:
countyVMLArray = resptext.split("<svg")
for(var c=1; c!= countyVMLArray.length; ++c){
countyVMLtext = "<svg" + countyVMLArray[c]
county[c] = new
DOMParser().parseFromString(countyVMLtext, 'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(county[c].documentElement,true));
county[c].addEventListener('click',testClick, false);
}
***********************
This creates the shape, But it does not attach the event to the svg
element.
What to do?
Thanks.

 

[Martin Honnen]

Is there any way I can attach events to the elements & change opacity.
Here is the code so far:
countyVMLArray = resptext.split("<svg")
for(var c=1; c!= countyVMLArray.length; ++c){
countyVMLtext = "<svg" + countyVMLArray[c]
county[c] = new
DOMParser().parseFromString(countyVMLtext, 'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(county[c].documentElement,true));
county[c].addEventListener('click',testClick, false);
}
***********************
This creates the shape, But it does not attach the event to the svg
element.
What to do?

You are attaching the event listener to the result of parseFromString.
That is not the node that will be inserted as importNode creates a
clone. So try

var tempDoc = new DOMParser().parseFromString(countyVMLtext,
'application/xml');
county[c] = shps2.ownerDocument.importNode(county[c].documentElement,true));
county[c].addEventListener('click',testClick, false);
shps2.appendChild(county[c]);

Also depending on your markup you might not want to call
addEventListener on county[c] but on child or descendant elements.

 

[Sunny]

Is there any way I can attach events to the elements & change opacity.
Here is the code so far:
           countyVMLArray = resptext.split("<svg")
                    for(var c=1; c!= countyVMLArray.length; ++c){
            countyVMLtext = "<svg" + countyVMLArray[c]
               county[c] = new
DOMParser().parseFromString(countyVMLtext, 'application/xml');

shps2.appendChild(shps2.ownerDocument.importNode(county[c].documentElement,­true));
    county[c].addEventListener('click',testClick, false);
 }
***********************
This creates the shape, But it does not attach the event to the svg
element.
What to do?

You are attaching the event listener to the result of parseFromString.
That is not the node that will be inserted as importNode creates a
clone. So try

var tempDoc = new DOMParser().parseFromString(countyVMLtext,
'application/xml');
county[c] = shps2.ownerDocument.importNode(county[c].documentElement,true));
county[c].addEventListener('click',testClick, false);
shps2.appendChild(county[c]);

Also depending on your markup you might not want to call
addEventListener on county[c] but on child or descendant elements.

--

        Martin Honnen
       http://JavaScript.FAQTs.com/- Hide quoted text -

- Show quoted text -

Hi martin,
Thanks for ur help.
Now I can attach the events fine.
But still I dont have any luck with changing the opacity of the svg
shape dynamically.
Also, How can I refer a shape?
Like in IE, I can get the shape like:
window.event.srcElement.value
In firefox, I tried,
window.event.target.value
But its giving me an error:
window.event has no properties

Do you know Why, & How can I refer to that particular element.?

Thanks for all ur help.

 

[Martin Honnen]

In firefox, I tried,
window.event.target.value
But its giving me an error:
window.event has no properties

Do you know Why, & How can I refer to that particular element.?

The function you pass to the addEventListener method as the second
argument takes one argument, the event object e.g.
foo.addEventListener('click', myListener, false);
with
function myListener (evt) {
alert(evt.target.tagName);
}

 

[Sunny]

The function you pass to the addEventListener method as the second
argument takes one argument, the event object e.g.
foo.addEventListener('click', myListener, false);
with
function myListener (evt) {
alert(evt.target.tagName);
}

Thanks Martin,
I am able to get the value of that particular shape by using
this.value in function.
but how can i change the height of an element in firefox.
Like in IE this works fine
county[c].style.width = '2';
county[c].style.height = '2';

But the same thing is not working in Firefox.
I wonder why?
What to do?