calling external javascript function in xslt doesn't work in IE

mohtasham1983 · 01-29-2008, 04:37 AM

I made a thread that onclick event doesn't work in IE and Opera while it works in FF 5 days ago and didn't find my answer. In that post I thought there was a problem with the document type, the tabview feature of YUI and finally just know I realized that if call an external javascript function on onclick event of anchor element it won't work.

For example the following code works in Opera, firefox and probably Internet Explorer(I haven't checked it in IE yet):

PHP Code:



<a> 
<xsl:attribute name="id">                                <xsl:value-of select="news_id"/>     
</xsl:attribute> 
<xsl:attribute name="onclick"> 
        <script type="text/javascript" src="functions.js"> 
            sayhi();  
        function sayhi() { 
            alert("hi"); 
            return false; 
        } 
    </script> 
</xsl:attribute> 
DO IT 
</a>

While the following example does work in FF, but not in IE and Opera.

PHP Code:



<a> 
<xsl:attribute name="id">                                <xsl:value-of select="news_id"/>     
</xsl:attribute> 
<xsl:attribute name="onclick"> 
        <script type="text/javascript" src="functions.js"> 
            sayhi();  
    </script> 
</xsl:attribute> 
DO IT 
</a>

Of course sayhi() function is located at the right place, since FF can find it.

As you can see sayhi() is just an example and doesn't have anything in it. My real javascript function needs to call another functions, so I don't really like the idea of defining all functions inside my xslt file. Moreover, some functions should be called by different element in different pages, so It's very unpleasant to have my code duplicated.

I'm very happy that I finally found where my problem was so I can ask some of XSLT experts give me necessary directions.

Thanks in advance.

delirio · 02-01-2008, 03:27 AM

Hi mohtasham1983,

You are making a fundamental mistake when you expect an element (i.e. script) to be the content of an attribute. This just isn't possible to achieve with any markup, nevermind HTML.

If what you're trying to achieve is inline Javascript as the value of the onclick attribute, then you just output whatever javacript syntax you expect to be executed like onclick="myFuction()".

Usually you'd add the script element in the head of the HTML document, and keep all the complex Javascript syntax inside a separete file, then you'd just call one function that can execute all the javacript code you need executed by that event.

Code:

<html>
 <head>
  <script type="text/javascript" src="functions.js"><!-- --></script>
 </head>
 <body>
  <a id="[some id]" onclick="sayhi()">DO IT<a/>
 </body>
<html>

the XSL should ve something along these lines:

Code:

<html>
 <head>
  <script type="text/javascript" src="functions.js">
   <xsl:comment> </xsl:comment>
  </script>
 </head>
 <body>
  <a id="{news_id}" onclick="sayhi()">DO IT<a/>
 </body>
<html>

the content of functions.js should have:

Code:

function sayhi() {
 alert("hi");
 return true;
}

Please try your code in a static HTML file before implementing it in XSL so you can clearely diferentiate bugs in HTML/JavaScript and in XSL syntax separately.

Regards

mohtasham1983 · 02-01-2008, 04:11 AM

Thank you very much. I really appreciate your help. You sound very experienced man.

I had like 400 lines of javascript code in my file. As you told I tried to do the same thing in a simple html page and it didn't work either. So I realized that there's nothing wrong with xslt, either. I have been using Opera for a week so I didn't know that it has an error console like firefox, so I looked at the error console in it, and it told me that there were some minor errors in my javascript file. I fixed those errors and everything worked pretty well in Opera. I guess it should be working in IE as well. I will try it tomorrow on IE to see how it works in IE.

I think this time other than mine it was Firefox fault as well. It should be more strict on syntaxes.

Alberto Lozano · 03-24-2009, 05:43 AM

Quote:

Originally Posted by delirio

Hi mohtasham1983,

You are making a fundamental mistake when you expect an element (i.e. script) to be the content of an attribute. This just isn't possible to achieve with any markup, nevermind HTML.

If what you're trying to achieve is inline Javascript as the value of the onclick attribute, then you just output whatever javacript syntax you expect to be executed like onclick="myFuction()".

Usually you'd add the script element in the head of the HTML document, and keep all the complex Javascript syntax inside a separete file, then you'd just call one function that can execute all the javacript code you need executed by that event.

Code:

<html>
 <head>
  <script type="text/javascript" src="functions.js"><!-- --></script>
 </head>
 <body>
  <a id="[some id]" onclick="sayhi()">DO IT<a/>
 </body>
<html>

the XSL should ve something along these lines:

Code:

<html>
 <head>
  <script type="text/javascript" src="functions.js">
   <xsl:comment> </xsl:comment>
  </script>
 </head>
 <body>
  <a id="{news_id}" onclick="sayhi()">DO IT<a/>
 </body>
<html>

the content of functions.js should have:

Code:

function sayhi() {
 alert("hi");
 return true;
}

Please try your code in a static HTML file before implementing it in XSL so you can clearely diferentiate bugs in HTML/JavaScript and in XSL syntax separately.

Regards

Hi delirio,

Following our instructions, i have achieved a piece of code in xsl (with javascript calls) that it works in IE and Opera but it doesn´t in FireFox. To be more specific I paste thhe piece of code in xsl:

<HEAD>
...
<SCRIPT type="text/javascript" src="funcionesScripts.js"></SCRIPT>
</HEAD>
<BODY onLoad="estilo();escribir(3);barra(2)">
...<xsl:apply-templates /> ...
<A id="imprime"onclick="crearVersionImprimible('imprimible','Formación',window.parent.frames[0].document.getElementById('css').href)"><IMG src='img/print.gif'>Versión para imprimir</A>
</BODY>

Would you have another advice for me?
Thank you in advance.
Alberto

darence · 05-15-2009, 12:26 PM

Please tell me how to call a javascript function which argument is xsl:value-of ? I need a functioin which can alert a XML value using javascript, but I dont know how to use xsl:value-of as argument ? I have a problem with < character

Thank you very much

mohtasham1983 · 05-15-2009, 12:53 PM

I'm not quite sure how to use value-of directly inside your javascript function. However, I use the following trick to get it done:

First assign the value of your XML data to a variable like this:

PHP Code:



<xsl:variable name="var_name"><xsl:value-of select="xml_node"/></xsl:variable>

Then pass the value of your variable to Javascript function like this:

PHP Code:



onClick="jsFunction({$var_name});"

I stopped using XSL as the templating language for my web development, because of its complexity. That's why, I haven't worked with it for a while and I'm not quite sure if the above solution will solve your problem.

darence · 05-15-2009, 02:25 PM

Thank you very much, this works as fine as I want. Thank you again. I lost a few hours trying to resolve the problem, but without efect

btw, me dont like xslt, too, but I must learn it because of exam at my university. The main problem is that my teacher did not explained xslt detailed, but he told us that we must know these things.

Thank you again, the best wishes