Link to home
Start Free TrialLog in
Avatar of BigGreenClenaMachine
BigGreenClenaMachine

asked on

how can <iframe> with transformed xml comunicate with web page

i have a problem with transformed xml

everithing went as planned until i tryed to get a value of a variable named SelectedLeafID from a tree.htm.
Variable is defined inside a xmltree.js.
xmltree.xls uses that script and function SelectedLeaf_Changed changes the value of SelectedLeafID.
but tree.htm can't read its value.
Why not ??? and  "Is there a way to do that?"

here are the files

-----------------------  tree.xml ----------------------------------
<?xml version="1.0" ?>
<!DOCTYPE tree SYSTEM "tree.dtd">
<?xml-stylesheet type="text/xsl" href="xmlTree.xsl"?>
<tree>
      <branch id="B1">
            <branchText>Branch1</branchText>
            <leaf id="L1">
                  <leafText>Leaf1</leafText>
            </leaf>
            <leaf id="L2">
                  <leafText>Leaf2</leafText>
            </leaf>
      </branch>
      <branch id="B2">
            <branchText>Branch2</branchText>
            <leaf id="L3">
                  <leafText>Leaf3</leafText>
            </leaf>
            <branch id="B3">
                  <branchText>Branch3</branchText>
                  <leaf id="L4">
                        <leafText>Leaf4</leafText>
                  </leaf>
                  <leaf id="L5">
                        <leafText>Leaf5</leafText>
                  </leaf>
            </branch>
            <leaf id="L6">
                  <leafText>Leaf6</leafText>
            </leaf>
      </branch>
</tree>
--------------------------------------------------------------------------
----------------------------xmltree.xls---------------------------------
<?xml version="1.0"?>
<xsl:stylesheet
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"></xsl:output>
<xsl:template match="/">
   <html>
      <head>
      <title>XML Tree Control</title>
      <link rel="stylesheet" type="text/css" href="xmlTree.css"/>
      <script type="text/javascript" src="xmlTree.js"></script>
      </head>
      <xsl:apply-templates/>
   </html>
</xsl:template>
<xsl:template match="tree">
   <body>
   <xsl:apply-templates/>
</body>
</xsl:template>
<xsl:template match="branch">
   <span class="trigger">
   <xsl:attribute name="onClick">showBranch('<xsl:value-of select="@id"/>');</xsl:attribute>
   <img src="closed.gif">
      <xsl:attribute name="id">I<xsl:value-of select="@id"/></xsl:attribute>
   </img>
   <xsl:value-of select="branchText"/>
   <br/>
   </span>
   <span class="branch">
   <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
   <xsl:apply-templates/>
   </span>
</xsl:template>
<xsl:template match="leaf">
      <img src="doc.gif"/>
      <span class="leaf">
      <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
      <xsl:attribute name="onClick">SelectedLeaf_Changed('<xsl:value-of select="@id"/>');</xsl:attribute>      
      <xsl:value-of select="leafText"/>
      </span><br/>
</xsl:template>
<!-- avoid output of text node  with default template -->
<xsl:template match="branchText"/>
</xsl:stylesheet>
-----------------------------------------------------------------------------------
---------------------------------xmltree.js--------------------------------------
   var SelectedLeafID= null;
  var openImg = new Image();
   openImg.src = "open.gif";
   var closedImg = new Image();
   closedImg.src = "closed.gif";
   
   function showBranch(branch){
      var objBranch = document.getElementById(branch).style;
      if(objBranch.display=="block")
         objBranch.display="none";
      else
         objBranch.display="block";
      swapFolder('I' + branch);
   }
   
   function swapFolder(img){
      objImg = document.getElementById(img);
      if(objImg.src.indexOf('closed.gif')>-1)
         objImg.src = openImg.src;
      else
         objImg.src = closedImg.src;
   }

   function SelectedLeaf_Changed(xleafID)
   {
   if (SelectedLeafID!=null)document.getElementById(SelectedLeafID).className="leaf";
    var lf = document.getElementById(xleafID);
    lf.className="leafSelected";
    SelectedLeafID = xleafID;
   }
-----------------------------------------------------------------------
---------------------xmltree.css------------------------------------
   body
   {
      font: 10pt Verdana,sans-serif;
      color: navy;
   }
   .trigger{
      cursor: hand;
      display: block;
   }
   .branch{
      display: none;
      margin-left: 16px;
   }
   .leaf
   {
      cursor: hand;
      background-color:white;
      color:navy;
   }
   .leafSelected
   {
      background-color:Navy;
      color:White;
   }
-------------------------------------------------------------------
------------------------------tree.htm--------------------------
   <html>
     <head>
       <title>XML Tree Control</title>
       <script language="javascript" src="xmltree.js"></script>
   </head>
   <body>
  <form name="form1" id="form1" method="post" action="">
      <iframe id="tree" src="tree.xml" value="" STYLE="POSITION:RELATIVE" ></iframe>
      <input type="button" name="cmd" id="cmd" value="value" onclick="alert(SelectedLeafID);">
 </form>
     
     </body>
   </html>
--------------------------------------------------------------------------------------
you will also need three images called:
open.gif
closed.gif
doc.gif

Thx
Avatar of BigGreenClenaMachine
BigGreenClenaMachine

ASKER

you also need tree.dtd

--------------------tree.dtd----------------------------
   <!ELEMENT tree (branch+)>
   <!ELEMENT branch (branchText,(branch|leaf)*)>
   <!ATTLIST branch id CDATA #REQUIRED>
   <!ELEMENT branchText (#PCDATA)>
   <!ATTLIST leaf id CDATA #REQUIRED>
   <!ELEMENT leaf (leafText)>
   <!ELEMENT leafText (#PCDATA)>
----------------------------------------------------------
ASKER CERTIFIED SOLUTION
Avatar of sparkplug
sparkplug
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial