Jump to content

Xslt - On The Client Tutorial


Brig
 Share

Recommended Posts

Wow. That's new. W3Schools actually has a cross browser example of transforming XSLT with JavaScript.I would have suggested Sarissa, but it seems that it too doesn't support Chrome. Perhaps Chrome simply doesn't offer any JavaScript API for doing XSLT.

Link to comment
Share on other sites

Thanks for the reply.Shame, that wasn't the answer I wanted. I'm building a new website for some friends and a large part of the visitors are using Chrome.Maybe someone can help me on the way to solve my problem in a different way.What I need to do is style an XML document into a table. The XML must be sorted by the class node and filtered to only show nodes when the lastplayed node is no more than 30 days old, then displayed on the page.Here's how the XML looks:

<?xml version="1.0" encoding="UTF-8" ?><guild>			<details>		<id>123456789</id>		<name>Some Name</name>		<server>Some Server</server>	</details>	<members>		<member>			<id>123456789</id>			<name>Some Name</name>			<rank>Member</rank>			<race>Human</race>			<######>M</######>			<class>Monk</class>				<level>47</level>			<lastplayed>8/6/06 12:07 AM</lastplayed>		</member>				<member>			<id>123456789</id>			<name>Some Name</name>			<rank>Member</rank>			<race>Ogre</race>			<######>M</######>			<class>Shadow Knight</class>				<level>85</level>			<lastplayed>7/13/09 8:47 PM</lastplayed>		</member>	</members></guild>

The content of the XML should be presented something like this on the page:

<table width="100%" border="0">  <tr>	<td width="20%">Name</td>	<td width="20%">Class</td>	<td width="20%">Level</td>	<td width="20%">Rank</td>	<td width="20%">Last Online</td>  </tr>  <tr>	<td>Some Name</td>	<td>Human</td>	<td>47</td>	<td>Member</td>	<td>8/6/06 12:07 AM</td>  </tr>  <tr>	<td>Some Name</td>	<td>Ogre</td>	<td>85</td>	<td>Member</td>	<td>7/13/09 8:47 PM</td>  </tr></table>

The XML file will be updated once per day so I don't really want to reference the XSL stylesheet in the actual XML. I need a solution so that the content on the page will be up to date without anyone having to edit the files on the server.What would be the best way of doing this please? Anyone got any ideas?It has to work in Chrome as well that is the problem.Any help on the way to a solution would be greatly appreciated!

Link to comment
Share on other sites

If you have PHP5 and the XSL extension, you can use that. If you have PHP5, but not the XSL extension, ask your host how/if they (or you) could enable it.With that extension, you must explicily specify the stylesheet and the XML, so there's no need to use an xml-stylesheet PI, as it would simply be disregarded anyway.

Edited by boen_robot
Link to comment
Share on other sites

Thanks will check out the PHP solution. Shame it's not part of standard PHP as most hosts can be quite tough on installing new modules.I think I know what is wrong though with the XSLT on the client way.It's seems to be a javascript issue.Someone posted this on the Google forum for Chrome. It doesn't exactly apply to the tutorial I'm trying to get to work but not far from it.Replace

var xmlDoc = document.implementation.createDocument("", " ", null);xmlDoc.async = false;xmlDoc.load(xmlsrc);

With:

var xmlhttp = new window.XMLHttpRequest();xmlhttp.open("GET", xmlsrc, false);xmlhttp.send(null);var xmlDoc = xmlhttp.responseXML.documentElement;

Reason is that Google Chrome does not support the XMLdocument.load method.I've tried to implement this but not been successful yet. My javascript isn't very good! Will post back here when and if I get it working in case it will help someone else.

Edited by Brig
Link to comment
Share on other sites

Try Sarissa then. Even though they don't explicitly say to support Chrome, they might. AFAIK, with it, you actually need to do exactly that to make Sarissa work, so a pleasent side effect could be that it works on Chrome.

Link to comment
Share on other sites

Thanks for the Sarissa suggestion. I think I'm close to getting everything to work. Just one problem now that I hope someone could help me solve!So I have another question :) How would I do to change the name of an element in my XML file with XSLT.Here's the original XML:

<?xml version="1.0" encoding="UTF-8" ?><guild>			<details>		<id>123456789</id>		<name>Some Name</name>		<server>Some Server</server>	</details>	<members>		<member>			<id>123456789</id>			<name>Some Name</name>			<rank>Member</rank>			<race>Human</race>			<######>M</######>			<class>Monk</class>				<level>47</level>			<lastplayed>8/6/06 12:07 AM</lastplayed>		</member>	</members></guild>

After the transformation it should look like this:

<?xml version="1.0" encoding="UTF-8" ?><guild>			<details>		<id>123456789</id>		<name>Some Name</name>		<server>Some Server</server>	</details>	<members>		<member>			<id>123456789</id>			<name>Some Name</name>			<rank>Member</rank>			<race>Human</race>			<######>M</######>			<playerclass>Monk</playerclass>				<level>47</level>			<lastplayed>8/6/06 12:07 AM</lastplayed>		</member>	</members></guild>

So the element <class> should change to <playerclass>. The output after the transformation should still be XML.Is this possible please?

Link to comment
Share on other sites

<xsl:template match="*"><xsl:copy><xsl:apply-templates/></xsl:copy></xsl:template><xsl:template match="class"><playerclass><xsl:apply-templates/></xsl:copy></xsl:template>

That's all there is to it.If you want to save the resulting file though, you'll have to use PHP. JavaScript can't save files.

Link to comment
Share on other sites

So if I link this XSLT code into my XML file I should see the result or do I have to do something else?I've tried the code you posted but it gives an error, I guess because the <playerclass> and </xsl:copy> elements aren't closed.I tried to use this code:

<?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" version="1.0" encoding="iso-8859-1" indent="yes"/>	<xsl:template match="*">		<xsl:copy><xsl:apply-templates/></xsl:copy>	</xsl:template>	<xsl:template match="class">		<playerclass><xsl:copy><xsl:apply-templates/></xsl:copy></playerclass>	</xsl:template></xsl:stylesheet>

Although it doesn't give me an error the output is still the same as the original xml file.

Link to comment
Share on other sites

Opps. That was an error on my part. Sorry. No need to do a <xsl:copy/> on the class element. i.e.:

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>	<xsl:template match="*">		<xsl:copy><xsl:apply-templates/></xsl:copy>	</xsl:template>	<xsl:template match="class">		<playerclass><xsl:apply-templates/></playerclass>	</xsl:template></xsl:stylesheet>

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...