Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2003-11-10
2
Medium Priority
?
391 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 750 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

704 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