Jump to content

XSLT and Javascript


asouza
 Share

Recommended Posts

Hi, I'd like to generate a javascript code "on the fly" using XSLT. Is there a way to do that (I did lots of tests without success)? Basically I have an XML with the following tag: <JS> var address = "Belle Glade, FL"; var map = new Map("mapContainer", "02P9jPTV34Goc7Ujxiji9w6zdNraPQRpb__dUGiU7XDbfuIyMH.WV6x1DTg8qiIC", address, 3); map.addTool( new PanTool(), true ); map.addWidget(new SatelliteControlWidget()); map.addWidget(new ZoomBarWidget()); marker = new CustomPOIMarker( 'Titulo', 'Cont. do titulo', 'Descricao', '0x0099FF', '0xFFFFFF'); map.addMarkerByAddress( marker, address); </JS>in the XSL file, my code looks like this:<script type="text/javascript"><xsl:copy-of select="Flight/Map/JS"/> </scprit>thanks a lot, Alex

Link to comment
Share on other sites

Hmm, I haven't played around with this, but you might try putting the return value of the XSL in an eval statement:

<script type="text/javascript">eval(<xsl:copy-of select="Flight/Map/JS"/>);</script>

Also, I noticed in your post that your closing script tag is "</scprit>" rather than "</script>". If that is the way it is in your XSL, then that might be the reason it isn't working.

Link to comment
Share on other sites

When you say it didn't work, does anything at all happen? Are you getting any error messages? What browser are you using to view this? Are you certain that the javascript that is in that XML is valid and functions correctly? Have you tried a simple test like this?

<JS>  alert("This is from XML.");</JS>

Link to comment
Share on other sites

You said the status bar displays "Done, with errors". Any chance IE lets you see exactly what those errors are? Sure, post the code, maybe boen_robot'll come along and solve this for you. :)

Link to comment
Share on other sites

XML file:

<?xml version="1.0" encoding="utf-8" ?><?xml-stylesheet type="text/xsl" href="icarus.xsl"?><Map><JS>			var address = "Belle Glade, FL";			var map = new Map("mapContainer", "02P9jPTV34Goc7Ujxiji9w6zdNraPQRpb__dUGiU7XDbfuIyMH.WV6x1DTg8qiIC", address, 3);			map.addTool( new PanTool(), true );			map.addWidget(new SatelliteControlWidget());			map.addWidget(new ZoomBarWidget());			marker = new CustomPOIMarker( 'Titulo', 'Cont. do titulo', 'Descricao', '0x0099FF', '0xFFFFFF'); 			map.addMarkerByAddress( marker, address); </JS></Map>

XSLT file (basically it is the sample to draw a YahooMap in the page):

<?xml version="1.0" encoding="ISO-8859-1" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/><xsl:template match="/"><html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><BODY><div id="mapContainer"></div><script type="text/javascript">eval(<xsl:copy-of select="Map/JS"/>);</script></body></html></xsl:template></xsl:stylesheet>

The working way is:

<?xml version="1.0" encoding="ISO-8859-1" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/><xsl:template match="/"><html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><BODY><div id="mapContainer"></div><script type="text/javascript">					// By Address					var address = "Gator Blv., Belle Glade, FL";										// By Lat Lon					  var address = new LatLon(26.697500, -80.658629);															// Builds the map					var map = new Map("mapContainer", "02P9jPTV34Goc7Ujxiji9w6zdNraPQRpb__dUGiU7XDbfuIyMH.WV6x1DTg8qiIC", address, 3);										// Make the map draggable 					map.addTool( new PanTool(), true );					map.addWidget(new SatelliteControlWidget());  					// Add the ZoomBar Widget to the map and display it 					map.addWidget(new ZoomBarWidget());										// Create a POI marker object					marker = new CustomPOIMarker( 'Titulo', 'Cont. do titulo', 'Descricao', '0x0099FF', '0xFFFFFF'); 										// Lat Lon					map.addMarkerByLatLon( marker, address);										// By Address 					//map.addMarkerByAddress( marker, address); 					</script></body></html></xsl:template></xsl:stylesheet>

Link to comment
Share on other sites

OK, I played around with this for a bit and got the following to work:XML:

<?xml version="1.0" encoding="utf-8" ?><?xml-stylesheet type="text/xsl" href="icarus.xsl"?><Map><JS>	alert("This is from the XML!");</JS></Map>

XSL:

<?xml version="1.0" encoding="ISO-8859-1" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/><xsl:template match="/"><html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><body><div id="mapContainer"></div><script type="text/javascript"><xsl:value-of select="Map/JS"/></script></body></html></xsl:template></xsl:stylesheet>

I essentially made two changes to the XSL:1) Your opening <BODY> tag didn't match the closing </body> tag. So, I changed <BODY> to <body>2) Rather than use "xsl:copy-of", I changed it to "xsl:value-of".2b) Oh, I also removed the eval() stuff as it didn't appear to be necessary.Hope this helps!

Link to comment
Share on other sites

Just for the record, instead of value-of, you could also use copy-of, as long as you add "/text()" to the path to get only the contents of the targeted element. Otherwise, you're getting the element and it's attributes being outputted too.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...