Results 1 to 5 of 5

Thread: Mittels SVG und Javascript ein HiddenField setzen

  1. #1
    Veteran
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Mittels SVG und Javascript ein HiddenField setzen

    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.

  2. #2
    Baccalaureus bimbo's Avatar
    Join Date
    Feb 2002
    Posts
    713
    Thanks
    21
    Thanked 19 Times in 9 Posts
    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.
    LVA Erfahrungsberichte: http://vowi.fsinf.at/

  3. #3
    Veteran
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  4. #4
    Veteran
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  5. #5
    Veteran
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();
          }
    Last edited by KFlash; 09-01-2008 at 00:27. Reason: code-tags

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •