CODEWITHSUNDEEP
javascript
Oong
Oong

Reputation:

Calling Javascript from XSL file

I have a XML file........

<ROOT>
      <MYNODES>
           <MYNODE>A</MYNODE>
           <MYNODE>B</MYNODE>
           <MYNODE>C</MYNODE>
           <MYNODE>D</MYNODE>
      </MYNODES> 
      <DOCS>
           <DOC>1</DOC>
           <DOC>2</DOC>
           <DOC>3</DOC>
      </DOC> 
      <PICS>
           <PIC>a.jpeg</PIC>
           <PIC>b.jpeg</PIC>
           <PIC>c.jpeg</PIC>
           <PIC>d.jpeg</PIC>
           <PIC>e.jpeg</PIC>
          </PICS>
  </ROOT>

and following XSLT file.....

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

<xsl:output method="xml" version="1.0" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

<xsl:template match="/ROOT">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>JINI  <xsl:value-of select="/ROOT/MYNODES/MYNODE/." /> </title>
        <link rel="stylesheet" type="text/css" href="jini.css" />
        <script language="JavaScript" src="commonHead.js" type="text/javascript" />
        </head>
    <body>

<table style="font-size:11px" border="5" bgcolor="#FFFFFF" width="99%" align="center" cellpadding="5">
<tr>
<td>
<xsl:attribute  name="bgcolor"> #FFAAAA </xsl:attribute> <xsl:attribute  name="onMouseover" >displayColor(event, 'blue') </xsl:attribute> <xsl:attribute  name="onMouseout"> backToOriginal(event, 'yellow') </xsl:attribute> AA</td>
<td>BB </td>
</tr>
</table>
</body>
</html>
</xsl:stylesheet>

But my displayColor doesn't work in browser ... Any clue.... How to call external function of java script file in XSL file...

My Javascript file is

   /***********************************************
   * Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
   * This notice must stay intact for legal use
   ***********************************************/

   // Specify the default location for flying widget
   var xpos = -10;
   var ypos = 20;

   //Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
   var highlightbehavior="TD"

   var ns6=document.getElementById&&!document.all
   var ie=document.all

   function displayColor(event, color){
     /* Popup is integrated within changeto */
     changeto(event, color,0,"");
   }

   function displayColorAndInfos(event, color, line){
     /* Popup is integrated within changeto */
     changeto(event, color,1,line);
   }

   function backToOriginal(event, color) {
     /* Killlink is integrated within changeback */
     changeback(event, color);
   }

   function changeto(e,highlightcolor,flag,line){
   source=ie? event.srcElement : e.target
   if (source.tagName=="TABLE")
   return
   while(source.tagName!=highlightbehavior && source.tagName!="HTML")
   source=ns6? source.parentNode : source.parentElement
   if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore"){
      source.style.backgroundColor=highlightcolor
      if (flag==1) {
    poplink(line,-500,5);
    }
      }
   }

   function contains_ns6(master, slave) { //check if slave is contained by master
   while (slave.parentNode)
   if ((slave = slave.parentNode) == master)
   return true;
   return false;
   }

   function changeback(e,originalcolor){
   if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
   return
   else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
   return
   if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source) {
      source.style.backgroundColor=originalcolor
      killlink();
      }
   }

Upvotes: 1

Views: 7999

Answers (3)

Dirk Vollmar
Dirk Vollmar

Reputation: 176239

There have been a few inconsistencies with the XML and XSLT you posted.

Try the following (please note the blank inserted inside the script tag to avoid that the node is collapsed by the XSLT engine):

XSLT:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:output method="html" version="1.0" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

  <xsl:template match="/ROOT">
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          JINI <xsl:value-of select="/ROOT/MYNODES/MYNODE/." />
        </title>
        <link rel="stylesheet" type="text/css" href="jini.css" />
        <script src="commonHead.js" type="text/javascript" >
            <xsl:text> </xsl:text>
        </script>
      </head>
      <body>
        <table style="font-size:11px" border="5" bgcolor="#FFFFFF" width="99%" align="center" cellpadding="5">
          <tr>
            <td bgcolor="#FFAAAA" onMouseover="displayColor(event, 'blue');" onMouseout="backToOriginal(event, 'yellow');">
              AA
            </td>
            <td>BB </td>
          </tr>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

XML input document:

<?xml version="1.0" encoding="utf-8"?>
<ROOT>
  <MYNODES>
    <MYNODE>A</MYNODE>
    <MYNODE>B</MYNODE>
    <MYNODE>C</MYNODE>
    <MYNODE>D</MYNODE>
  </MYNODES>
  <DOCS>
    <DOC>1</DOC>
    <DOC>2</DOC>
    <DOC>3</DOC>
  </DOCS>
  <PICS>
    <PIC>a.jpeg</PIC>
    <PIC>b.jpeg</PIC>
    <PIC>c.jpeg</PIC>
    <PIC>d.jpeg</PIC>
    <PIC>e.jpeg</PIC>
  </PICS>
</ROOT>

Since you did not provide your JavaScript code it is however not possible to see whether there is a problem within your script. Otherwise everything should work fine with the above input / XSLT.

Upvotes: 1

Mark Pim
Mark Pim

Reputation: 10074

You also haven't closed the <ROOT> tag in your XML file:

<ROOT>
  <MYNODES>
       <MYNODE>A</MYNODE>
       <MYNODE>B</MYNODE>
       <MYNODE>C</MYNODE>
       <MYNODE>D</MYNODE>
  </MYNODES> 
  <DOCS>
       <DOC>1</DOC>
       <DOC>2</DOC>
       <DOC>3</DOC>
  </DOC> 
  <PICS>
       <PIC>a.jpeg</PIC>
       <PIC>b.jpeg</PIC>
       <PIC>c.jpeg</PIC>
       <PIC>d.jpeg</PIC>
       <PIC>e.jpeg</PIC>
  </PICS>
</ROOT>

Upvotes: 0

Greg
Greg

Reputation: 321796

You haven't closed the <script> tag - you need:

<script src="commonHead.js" type="text/javascript"></script>

Upvotes: 3

Related Questions