Solved

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

Posted on 2003-11-10
2
372 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now