[JavaScript/SVG] Communicatie SVG > Textarea

[Norm2782]

Mijn probleem: ik heb een SVG grafiek en daarnaast een textarea. Nou wil ik als ik op een punt klik in de SVG grafiek een tekst in de textarea zetten. MouseOver ed. effectjes werken prima binnen de SVG zelf, maar for some reason kan ie de textarea niet aanspreken.

Dit werkt iig niet...
document.getElementById('textarea').value = 'lorem ipsum dolor';

Ik moet toe geven dat ik zeer weinig JavaScript ervaring heb, maar na een paar uur google lastig gevallen te hebben kom ik er nog steeds niet uit.

Is het uberhaupt mogelijk om dit voor elkaar te krijgen?

Bedankt!

[Fatamorgana]

Heb je de textarea het id 'textarea' gegeven? Misschien is dat een reserved word en werkt het wel als je hem bv 'tarea' noemt.

Dus zo: <textarea id="tarea"></textarea>

[ Voor 23% gewijzigd door Fatamorgana op 09-06-2005 15:29 ]

[Norm2782]

De ID enz. staat goed en is geen gereserveerd woord. De textarea heeft in mn programma een ander ID, maar heb m hier als voorbeeld textarea genoemd om het voorbeeld duidelijker te maken.

[TXC]

Geef hem anders een name en spreek hem daar eens mee aan.

Document.formnaam.textareanaam.value = blah


Oh nee, ik weet al wat er aan de hand is. Een textarea vullen werkt volgens mij niet met het value attribuut.

[ Voor 56% gewijzigd door TXC op 09-06-2005 15:36 ]

[whoami]

P&W -> W&G

Javascript en client side zut hoort niet thuis in p&w, maar bij de bovenburen.

[Norm2782]

TXC schreef op donderdag 09 juni 2005 @ 15:32:
Geef hem anders een name en spreek hem daar eens mee aan.

Document.formnaam.textareanaam.value = blah


Oh nee, ik weet al wat er aan de hand is. Een textarea vullen werkt niet met het value attribuut. Je zult het op een andere manier moeten doen.

In een ander gedeelte van mn programma word een textarea wel gevuld dmv. het value attribuut, dus dat is het niet... maar toch ff proberen om dat ding wat directer aan te spreken met formnaam dr bij.

edit:

Nop... werkt ook niet. Het JavaScript word trouwens uitgevoerd binnen de SVG, dus niet in het document...

[ Voor 11% gewijzigd door Norm2782 op 09-06-2005 15:41 ]

[Verwijderd]

als je je svg als embedded object in je html hebt werkt dit wel

parent.document.getElementById('textarea').value='test'

[Fatamorgana]

Grappig, als ik het zo doe werkt het niet:

<a href="javascript:document.getElementById('tarea').value='hoi';">klik</a>

Maar zo wel:

<a href="javascript:doit()">klik</a>

En dan is de javascript functie:

function doit(){
document.getElementById('tarea').value='hoi';
}

[Verwijderd]

Fatamorgana schreef op donderdag 09 juni 2005 @ 15:44:

<a href="javascript:document.getElementById('tarea').value='hoi';">klik</a>

het lijkt me hier te gaan over een textarea wijzigen vanuit een actie in de svg, dus snap ik niet hoe jij met a href komt aandraven...

[Norm2782]

Verwijderd schreef op donderdag 09 juni 2005 @ 15:39:
als je je svg als embedded object in je html hebt werkt dit wel

parent.document.getElementById('textarea').value='test'

werkt ook niet

mn SVG zit zo in mn html:

<object data="svg_graph.php" width="350" height="200" type="image/svg+xml" />

[ Voor 13% gewijzigd door Norm2782 op 09-06-2005 15:48 ]

[Verwijderd]

<object data="svg_graph.php" width="350" height="200" type="image/svg+xml" />

probeer het dan zo eens

<EMBED WIDTH="350" HEIGHT="200" SRC="svg_graph.php" type="image/svg+xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/">

pluginspace is natuurlijk niet mandatory maar wel handig

[Fatamorgana]

Verwijderd schreef op donderdag 09 juni 2005 @ 15:47:
het lijkt me hier te gaan over een textarea wijzigen vanuit een actie in de svg, dus snap ik niet hoe jij met a href komt aandraven...

Het was even een test om te kijken of er meer methodes zijn waarbij het niet werkt en dit is dus ook zo'n voorbeeld. Zelfde code op verschillende manieren gebruikt, werkt niet en werkt wel.

[Norm2782]

Verwijderd schreef op donderdag 09 juni 2005 @ 15:50:
[...]


probeer het dan zo eens

<EMBED WIDTH="350" HEIGHT="200" SRC="svg_graph.php" type="image/svg+xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/">

pluginspace is natuurlijk niet mandatory maar wel handig

it's a no-go.... textarea blijft nog steeds leeg. Wat is het grote verschil tussen Embed en Object eigenlijk? (Had iets met Netscape compatibility te maken als ik het me goed kan herinneren...)

[!AnacondA!]

..volgensmij moet je innerHTML gebruiken...

dus: document.getElementById('id').innerHTML= 'blablablabla';

[Verwijderd]

<embed>

advantage: supported in nearly any browser, allows html2svg and svg2html scripting, is recommended by Adobe for their SVG Viewer
disadvantage: not clearly standardized within any HTML specification

<object>

advantage: HTML4 and higher standard, supported in newer browser generations
disadvantage: works on newer browsers but without html2svg and svg2html scripting.

<iframe>

advantage: works in most browsers, but not documented
disadvantage: generates a window-like border without specific styling

bron: carto.net

ik werk al 1,5 jaar met SVG en heb al veel gezever gehad met plugins en browsers en gedoe. Ik kijk heel hard uit naar FF 1.1, met native SVG support. Dat zal dé grote doorbraak worden voor SVG en zal het een Flash killer maken !

[Norm2782]

anaconda schreef op donderdag 09 juni 2005 @ 16:00:
..volgensmij moet je innerHTML gebruiken...

dus: document.getElementById('id').innerHTML= 'blablablabla';

nog steeds niks...

[Verwijderd]

ff alles op een rijtje (bij mij werkt die perfect dus...)

in je svg :

een object met een onclick event
onclick="parent.document.getElementById('txtarea').value='test'"

de svg via embed in je html pagina

in je html pagina een textarea
<textarea name="'txtarea'" id="'txtarea'"></textarea>

[Norm2782]

Verwijderd schreef op donderdag 09 juni 2005 @ 16:05:
ff alles op een rijtje (bij mij werkt die perfect dus...)

in je svg :

een object met een onclick event
onclick="parent.document.getElementById('txtarea').value='test'"

de svg via embed in je html pagina

in je html pagina een textarea
<textarea name="'txtarea'" id="'txtarea'"></textarea>

Als t bij jou wel werkt dan is er hier iets goed mis, want de textarea blijft leeg. Zowel Firefox 1.0.4 als Safari 2.0.412 weigeren gewoon mee te werken. Heb hier OS X 4.1 met de nieuwste Adobe SVG Viewer 3.0.76...

Edit

mn svg source

code:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg width='350' height='200' onload='Initialize(evt)' >
<!-- Extra SVG -->
<script type="text/ecmascript">
  <![CDATA[
        
        var svgdoc = null;
    function Initialize(LoadEvent) {
      svgdoc = LoadEvent.getTarget().getOwnerDocument();
    }
  
    function showText(id) {
                var svgobj = svgdoc.getElementById(id);
                var svgstyle = svgobj.getStyle();
                                                    
                svgstyle.setProperty("opacity", 1 );
    }
    
    function hideText(id) {
                var svgobj = svgdoc.getElementById(id);
                var svgstyle = svgobj.getStyle();
                                                    
                svgstyle.setProperty("opacity", 0 );
    }
]]>
</script>
<defs>
        <marker id="circle" style="stroke:#000; stroke-width:0; fill:#F00;"
                viewBox="0 0 10 10" refX="5" refY="5" orient="0"
                markerUnits="strokeWidth" markerWidth="5" markerHeight="5">
                <circle cx="5" cy="5" r="4"/>
        </marker>
</defs>
<!-- End Extra SVG -->
<!-- Plot Area -->
<g transform='translate(35,5)'>
<g style='shape-rendering: crispEdges; stroke:#ccc; stroke-width:1; '>
<line x1='44.142857142857' y1='0' x2='44.142857142857' y2='144'/>
<line x1='264.85714285714' y1='0' x2='264.85714285714' y2='144'/>
</g>
<g style='shape-rendering: crispEdges; stroke:#ccc; stroke-width:1; '>
<line x1='0' y1='0' x2='309' y2='0'/>
<line x1='0' y1='28.8' x2='309' y2='28.8'/>
<line x1='0' y1='57.6' x2='309' y2='57.6'/>
<line x1='0' y1='86.4' x2='309' y2='86.4'/>
<line x1='0' y1='115.2' x2='309' y2='115.2'/>
<line x1='0' y1='144' x2='309' y2='144'/>
</g>
<g style='shape-rendering: crispEdges; stroke:#000; stroke-width:1; '>
<line x1='0' y1='0' x2='309' y2='0'/>
<line x1='0' y1='144' x2='309' y2='144'/>
<line x1='309' y1='0' x2='309' y2='144'/>
<line x1='0' y1='0' x2='0' y2='144'/>
</g>
<g style='text-rendering: geometricPrecision; font-family: arial, sans-serif; font-size: 10pt;'>
<text text-anchor='end' transform='translate(0, 10) rotate(-30 44.142857142857 144)' x='44.142857142857' y='144'>09-06-05</text>
<text text-anchor='end' transform='translate(0, 10) rotate(-30 264.85714285714 144)' x='264.85714285714' y='144'>09-06-05</text>
</g>
<g style='text-rendering: geometricPrecision; font-family: arial, sans-serif; font-size: 10pt;'>
<text text-anchor='end' transform='translate(-5, 0)' x='0' dy='0.5em' y='0'>24</text>
<text text-anchor='end' transform='translate(-5, 0)' x='0' dy='0.5em' y='28.8'>19</text>
<text text-anchor='end' transform='translate(-5, 0)' x='0' dy='0.5em' y='57.6'>14</text>
<text text-anchor='end' transform='translate(-5, 0)' x='0' dy='0.5em' y='86.4'>10</text>
<text text-anchor='end' transform='translate(-5, 0)' x='0' dy='0.5em' y='115.2'>5</text>
<text text-anchor='end' transform='translate(-5, 0)' x='0' dy='0.5em' y='144'>0</text>
</g>
<g style='shape-rendering: geometricPrecision; stroke-linecap: round; stroke:#F00; stroke-width:2;'>
<line marker-end='url(#circle)' x1='44.142857142857' y1='25' x2='44.142857142857' y2='25' />
<line marker-end='url(#circle)' x1='44.142857142857' y1='25' x2='264.85714285714' y2='127' />
</g>
<g style='shape-rendering: geometricPrecision; stroke-linecap: round; '>
<circle cx='44.142857142857' cy='25' r='6' style='fill-opacity:0;stroke-opacity:0;' onclick="parent.document.getElementById('txtarea').value='test'" onmouseover='showText("time09:12");' onmouseout='hideText("time09:12");' />
<text x='0' y='190' id='time09:12' startOffset='0' style='opacity:0;'>Tijd: 09:12 - Waarde: 20</text>
<circle cx='264.85714285714' cy='127' r='6' style='fill-opacity:0;stroke-opacity:0;' onclick="parent.document.getElementById('txtarea').value='test'" onmouseover='showText("time16:16");' onmouseout='hideText("time16:16");' />
<text x='0' y='190' id='time16:16' startOffset='0' style='opacity:0;'>Tijd: 16:16 - Waarde: 3</text>
</g>
</g>
<!-- End Plot Area -->
</svg>

[ Voor 116% gewijzigd door Norm2782 op 09-06-2005 16:19 ]

[Verwijderd]

<guessing mode>
top.document.getElementById('txtarea').value='test'
</guessing mode>

[Norm2782]

Verwijderd schreef op donderdag 09 juni 2005 @ 16:18:
<guessing mode>
top.document.getElementById('txtarea').value='test'
</guessing mode>

ook niet

Edit:

Korte samenvatting van mn HTML (niet letten op ranzig CSS gebruik enz )

code:

<?xml version="1.0" encoding="utf-8"?>
<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<textarea name="txtarea" id="txtarea"></textarea>
<div id="main_content_container">
<div style="float: left;margin-left: 1em;">
<table style="border-top: 1px solid #999999;border-bottom: 1px solid #999999;margin-bottom: .5em;margin-top: .5em;">
<tr>
<td colspan="4">
<embed width="350" height="200" src="svg_graph.php?i=32&p=36" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
</td>
</tr>
</table>
</div>
</div>
</body></html>

[ Voor 194% gewijzigd door Norm2782 op 09-06-2005 16:44 ]

[Verwijderd]

bij mij doet jouw source het

omdat ik nu bij een klant zit en geen laptop in het netwerk mag hangen kan ik wel enkel testen in IE dus denk ik dat het probleem snel gevonden is...

vanavond kan ik testen op FF, is nog wel een feature die ik nog nooit gebruikt het (wel van html > svg) maar dat gaat blijkbaar heel wat simpeler

Konden we maar al een svg namespace gebruiken in onze html, dan hadden we nu geen zever gehad

[Norm2782]

Dankje! Het ligt dus iig niet aan mn gezonde verstand ff VPC aanzetten en onder Win2k testen.
SVG is geweldig, dus als het ook nou eens door alles en iedereen ge support werd....

Edit

Jup... Win2k/IE6 met Adobe Viewer doet t prima.... * vervloekt t eea *

[ Voor 19% gewijzigd door Norm2782 op 09-06-2005 17:45 ]