Mittels SVG und Javascript ein HiddenField setzen

**KFlash** · 08-01-2008, 21:13

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 Code:

<?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>

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** · 08-01-2008, 22:37

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** · 08-01-2008, 22:47

Kleines Update:

Der Scriptteil wurde so verändert:

HTML Code:

<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>

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** · 08-01-2008, 22:50

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** · 09-01-2008, 00:26

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();
      }

Thread: Mittels SVG und Javascript ein HiddenField setzen

Thread Tools

Display

Mittels SVG und Javascript ein HiddenField setzen

Bookmarks

Bookmarks

Posting Permissions