Solved

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

Posted on 2003-11-10
2
383 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:BigGreenClenaMachine
2 Comments
 
LVL 1

Author Comment

by:BigGreenClenaMachine
ID: 9714641
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)>
----------------------------------------------------------
0
 
LVL 9

Accepted Solution

by:
sparkplug earned 250 total points
ID: 9732963
The xml is loaded into the iframe. You therefore have to use the name of the iframe when referring to the variable.

e.g.
     <input type="button" name="cmd" id="cmd" value="value" onclick="alert(tree.SelectedLeafID);">

>S'Plug<
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question