Mittels SVG und Javascript ein HiddenField setzen

KFlash

Hallo Leute.

Ich versuche schon eine Weile per SVG und Javascript ein Hiddenfield zu ändern. Das ganze spielt sich in einer XHTML Seite ab.

Die Seite sieht gekürzt so aus:

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






<html xmlns="http://www.w3.org/1999/xhtml">
<head>


[... mehr code ...]


    <script type="text/ecmascript">
    <![CDATA[
      var svgDoc = null;
      var svgWin = null;


      function aendereRadius(direction)
      {
        var zoomlevel = document.getElementById('zoom');
           if (direction==f)
            zoomlevel.value = '0';
        if (direction==m)
            zoomlevel.value = zoomlevel.value-1;
        if (direction==p)
            zoomlevel.value = zoomlevel.value+1;
        document.navigation.submit();
      }
    ]]>
    </script>


    
</head>


<body>
<div align="center" style="height:100%">
    <div id="outFrame">


[... mehr code ...]
                 <table id="contentTable" width="100%" border="0" style="table-layout:fixed;">
                  <tr>


                     <td id="graphCell">
                         <div id="graphContainer" title="The output panel."> 
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" version="1.1">


<rect id="minus" x ="0" y ="0" width ="18" height ="12" fill="lightblue" fill-opacity="0.8" onclick="aendereRadius('m')" style="stroke:blue;stroke-width:1px" />
<text x="9" y="12" text-anchor="middle" style="font-size:14px;font-weight:bold;">
-
 </text>
<rect id="plus" x ="36" y ="0" width ="18" height ="12" fill="lightblue" fill-opacity="0.8" onclick="aendereRadius('p')" style="stroke:blue;stroke-width:1px" />
<text x="45" y="12" text-anchor="middle" style="font-size:14px;font-weight:bold;">
+
 </text>
<rect id="zahl" x ="18" y ="0" width ="18" height ="12" fill="lightblue" fill-opacity="0.8" style="stroke:blue;stroke-width:1px" />
<text x="27" y="12" text-anchor="middle" style="font-size:12px;font-weight:bold;">
0
 </text>
<rect id="fit" x ="0" y ="12" width ="54" height ="12" fill="lightblue" fill-opacity="0.8" onclick="aendereRadius('f')" style="stroke:blue;stroke-width:1px" />
<text x="27" y="24" text-anchor="middle" style="font-size:11px;font-weight:bold;">
Fit Zoom
 </text>
</svg>    
                        </div>
                     </td>
                     <td id="navCell">
                     <form action="search_results.action" method="post" name="navigation" id="navigation">
                        <input id="zoom" type="hidden" name="zoom" value="0"/>

                        [... mehr code ...]

                     </form>


                     </td>
                  </tr>
                </table>


[... mehr code ...]

    </div>
</div>
</body>
</html>

Alles anzeigen

Aus mir unerfindlichen Gründen wird der Scriptcode nicht ausgeführt. Wohlgeformt ist mein text, dass würde sonst Firefox anmeckern. JavaScript-Fehler existieren nicht oder werden zumindest von der WebDevelopmer Toolbar im Firefox nicht registriert/angemeckert.

Könnt ihr mir sagen wo der Fehler liegt.

bimbo

bei mir meckert der Firefox wegen dem

Code

<![CDATA[

und ich würd mal
statt

Code

direction==f

Code

direction=="f"

nehmen, dann sollts funktionieren.

KFlash

Kleines Update:

Der Scriptteil wurde so verändert:

HTML

<script type="text/ecmascript">
    <![CDATA[
      function aendereRadius(direction)
      {
        var zoomlevel = document.getElementById('zoom');
           if (direction=='f') {
            zoomlevel.value = '0';
            alert('Dir:'+direction);
        }
        if (direction=='m'){
            zoomlevel.value = zoomlevel.value-1;
            alert('Dir:'+direction);
        }
        if (direction=='p'){
            zoomlevel.value = zoomlevel.value+1;
            alert('Dir:'+direction);
        }

        document.navigation.submit();
      }
    ]]>
    </script>

Alles anzeigen

Dadurch gelingt es mir bereits die verschiedenen Alerts zu sehen.
Etwas verstören: Die Alerts kommen nur wenn man auf die rects selbst klickt. Dort wo der Text/Beschriftung steht passiert nichts.

Was definitiv noch nicht geht, ist das submit des Fomulars.

KFlash

Hallo bimbo, danke für die antwort.
Das mit den Anführungszeichen habe ich wie oben zu sehen mittlerweile auch geändert.

Das bei dir ein Fehler kommt könnte daran liegen, dass es nicht als xhtml behandelt wird. (?)

Ich habe den von mir geposteten Code als xhtml datei gespeichert und konnte ihn mit firefox (2.0.0.11) öffnen.

KFlash

Habs jetzt hinbekommen.

So sieht das endergebnis aus: (Komischerweise funktioniert das submit bei der variante unten)

Code

function aendereRadius(direction)
      {
        var zoomlevel = document.getElementById('zoom');

           if (direction=='f') {
            zoomlevel.value = "0";
        }

        if (direction=='m'){

            if ( parseInt(zoomlevel.value)==0 ) {
                var select = document.getElementsByName('dist')[0];
                var wert = select.options[select.selectedIndex].value;

                zoomlevel.value = wert;

            }
            if ( parseInt(zoomlevel.value)>1 )
                zoomlevel.value = parseInt(zoomlevel.value)-1;
        }

        if (direction=='p'){
            if ( parseInt(zoomlevel.value)==0 ) {
                var select = document.getElementsByName('dist')[0];
                var wert = select.options[select.selectedIndex].value;

                zoomlevel.value = wert;

            }
            if ( parseInt(zoomlevel.value)<10 )
                zoomlevel.value = parseInt(zoomlevel.value)+1;
        }

        document.forms['navigation'].submit();
      }

Alles anzeigen

Maximilian Rupp 27. Dezember 2024 um 00:12