Solved

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

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Does a Google search find images with the word being searched? 11 75
XSLT XML 4 19
read an xml file in perl 2 32
Macro to import XML in Access 2013 2 39
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

810 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