www.webdeveloper.com
Results 1 to 5 of 5

Thread: JavaScript in XSL - doesn't work

  1. #1
    Join Date
    May 2005
    Posts
    10

    JavaScript in XSL - doesn't work

    Well when i used this script in pure html it worked perfectly but when i moved it to xsl it shows error that object was expected...

    my script in xsl:


    Code:
    <xsl:comment><![CDATA[
    function ShowMessage(text,id)
    	{
    		top_pos = y +100+ 'px';
    		left_pos = x -220 + 'px';            
    	document.body.insertAdjacentHTML('BeforeEnd', '<DIV STYLE="position:absolute; TOP:' + top_pos + '; LEFT:' + left_pos + ';" ID="' + id + '"><table border="0" cellpadding="1" cellspacing="0"><tr><td><img src="' + text + '"/></td></tr></table></DIV>');
    	}
    
    function Kill(id)
    	{
    		id.innerHTML = "";
    		id.outerHTML = "";
    	}
    function XY(e)
    {
    y=e.clientY + document.body.scrollTop;
    x= e.clientX + document.body.scrollLeft;
    }
    ]]></xsl:comment>

    then, somewhere in xsl:

    Code:
    <td align="center"><a onmouseover="if (window.event) XY(event); ShowMessage('graph/chelsea.gif', 'id1')" onmouseout="Kill('id1')" HREF="http://www.chelsea.com">Chelsea</a></td>
    Maybe someone can tell me what am I doing wrong?
    Last edited by mblichew; 05-22-2005 at 04:09 AM.

  2. #2
    Join Date
    Feb 2003
    Location
    Derby, UK
    Posts
    456
    Depends on the rest of the code, but it looks like your javascript function might not end up in a script block? Not really sure why it is an xsl:comment either, unless that is just to get the html comment inside the script tags that some people use to protect older browsers?

    If you can show the generated html then it would be a lot easier to figure out the cause of the problem as it is the html that is generating the error, not the xslt per se (unless I am missing something?)

  3. #3
    Join Date
    May 2005
    Posts
    10
    well, i wrote all this <html thing> by myself in the xsl file.
    I'll post all the files here and if you can't understand smth it means that theese words had been written in Polish language ;p

    tabela.html:
    Code:
    <html>
    	<head>
    		<title>Tabela rozgrywek Premier League</title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			var xml = new ActiveXObject("Microsoft.XMLDOM")
    			xml.async = false
    			xml.load("tabela.xml")
    
    			var xsl = new ActiveXObject("Microsoft.XMLDOM")
    			xsl.async = false
    			xsl.load("tabela.xsl")
    
    			document.write(xml.transformNode(xsl))
    		</script>
    	</body>
    </html>
    tabela.xml: - there is such a file but i did'n use it in xsl file yet... - just like the tabela.xsd file - schema

    tabela.xsl:
    Code:
    <?xml version="1.0" encoding="ISO-8859-2"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:xslt="http://www.w3.org/1999/XSL/Transform" result-ns="">
    	<xsl:template match="/">
    		<html>
    			<head>
    				<xsl:comment><![CDATA[
    function ShowMessage(text,id)
    	{if (ble){
    		top_pos = 100+ 'px';
    		left_pos = 220 + 'px';            
    	document.body.insertAdjacentHTML('AfterBegin', '<DIV STYLE="position:absolute; TOP:' + top_pos + '; LEFT:' + left_pos + ';" ID="' + id + '"><img src="'+ text +'" alt="'+text+'"/></DIV>');
    	}}
    function Kill(id)
    	{
    		id.innerHTML = "";
    		id.outerHTML = "";
    	}
    function XY(e)
    {
    y=event.clientY + document.body.scrollTop;
    x= event.clientX + document.body.scrollLeft;
    }
    ]]></xsl:comment>
    				<STYLE>
    	body {margin: 2em;}
    	td.tytul {Font-family: "Comic Sans MS"; margin: 1em;}
    	td.opis {color: black; Font-family: "Times New Roman";}
    	td.ar35white {font: 30 Arial; color: #FFFFFF;}
    	td.ar20dblue {font: 20 Arial; color: darkblue;}
    	td.podpis {font: 10 "Comic Sans MS"; color:rgb(112,112,112); font-style: italic;}
    </STYLE>
    
    			</head>
    			<body bgcolor="rgb(255,140,90">
    				<center>
    					<table border="3" cellspacing="0" width="100%" bgcolor="#00FFFF">
    						<tr>
    							<td align="center">
    								<table border="1" bgcolor="#00FAFF">
    									<tr>
    										<td>
    											<a href="glowna.html">
    												<img src="graph\glowna.bmp" alt="Go back to home"/>
    											</a>
    										</td>
    										<td>
    											<a href="kontakt.html">
    												<img src="graph\kontakt.bmp" alt="Contact with webmaster"/>
    											</a>
    										</td>
    										<td>
    											<a href="tabela.html">
    												<img src="graph\start.bmp" alt="Go to league table"/>
    											</a>
    										</td>
    									</tr>
    								</table>
    							</td>
    						</tr>
    						<tr>
    							<td id="ble" align="center">
    								<a onmouseover="ShowMessage('/graph/chelsea.gif','id1')" onmouseout="Kill('id1')" HREF="http://www.chelsea.com">Chelsea</a>
    							</td>
    						</tr>
    					</table>
    				</center>
    			</body>
    		</html>
    	</xsl:template>
    </xsl:stylesheet>

    And that would be all
    Thanks in advance

  4. #4
    Join Date
    Feb 2003
    Location
    Derby, UK
    Posts
    456
    Ah ok, you are doing the transform on the client-side, the disadvantage of that is you cannot easily see the output that is produced. However from the xsl it is clear that my original guess was correct, the function is not enclosed in a script tag, try enclosing it in script tags similar to below:

    Code:
    	<xsl:template match="/">
    		<html>
    			<head>
    <script type="text/javascript">
    				<xsl:comment><![CDATA[
    function ShowMessage(text,id)
    	{if (ble){
    		top_pos = 100+ 'px';
    		left_pos = 220 + 'px';            
    	document.body.insertAdjacentHTML('AfterBegin', '<DIV STYLE="position:absolute; TOP:' + top_pos + '; LEFT:' + left_pos + ';" ID="' + id + '"><img src="'+ text +'" alt="'+text+'"/></DIV>');
    	}}
    function Kill(id)
    	{
    		id.innerHTML = "";
    		id.outerHTML = "";
    	}
    function XY(e)
    {
    y=event.clientY + document.body.scrollTop;
    x= event.clientX + document.body.scrollLeft;
    }
    ]]></xsl:comment>
    </script>
    				<STYLE>

  5. #5
    Join Date
    May 2005
    Posts
    10
    yay, thanks a lot - it helped

    but now i have another problem: my kill function doesn't work:

    in script - just like you said:
    Code:
    function kill(id)
    	{
    		id.innerHTML = "";
    		id.outerHTML = "";
    	}
    then somewhere in body:
    Code:
    <a onmouseover="ShowMessage('graph/chelsea.gif','id1')" onmouseout="Kill('id1')" HREF="http://www.chelsea.com">Chelsea</a>
    the problem is that my picture doesn't disappear when I take the mouse out of the link...
    it also isn't moving after the cursor - when it's over the link

    P.S. i use client side because i'm writing this as my project for the exam - so it'll never be published.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles