XML, Ajax, and table [Archive]

Click to See Complete Forum and Search --> : XML, Ajax, and table

AzaraT

01-06-2008, 10:44 AM

Hi there!

I currently have a script that loads an XML file with ajax, how ever theres quite alot of data, and well, it looks quite messy. So I want to load it up in a table instead of what im doing now (see the scrips), so it looks more like this: http://tothegame.com/monthlyreleases.asp

Xml:
<?xml version="1.0" encoding="UTF-8" ?>

<Games>
<isvalid></isvalid>

<fromdate>2008-01-01</fromdate>
<todate>2008-01-31</todate>
<gamecount>54</gamecount>

<Game>
<GameID>6499</GameID>
<Title><![CDATA[PDC World Championship Darts 2008]]></Title>
<Category>Sport</Category>
<URLGameinfo><![CDATA[http://www.tothegame.com/game.asp?id=6499]]></URLGameinfo>
<Platform>
<ID>9</ID>

<Title>Wii</Title>
</Platform>
<ReleaseDates>
<Scandinavia>2008-01-11</Scandinavia>
<UK>2008-01-11</UK>
<US>N/A</US>
</ReleaseDates>

<UKPublisher><![CDATA[Oxygen Interactive]]></UKPublisher>
<Developer><![CDATA[To Be Announced]]></Developer>
</Game>

<Game>
<GameID>6500</GameID>
<Title><![CDATA[PDC World Championship Darts 2008]]></Title>
<Category>Sport</Category>

<URLGameinfo><![CDATA[http://www.tothegame.com/game.asp?id=6500]]></URLGameinfo>
<Platform>
<ID>1</ID>
<Title>PC</Title>
</Platform>
<ReleaseDates>
<Scandinavia>2008-01-11</Scandinavia>

<UK>2008-01-11</UK>
<US>N/A</US>
</ReleaseDates>
<UKPublisher><![CDATA[Oxygen Interactive]]></UKPublisher>
<Developer><![CDATA[To Be Announced]]></Developer>
</Game>

and that continues...........

and the html

<html>
<head>
<script>
var xmlHttp;
function loadXML()
{
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}

}
xmlHttp.onreadystatechange=test;
xmlHttp.open("GET","release_list_jan.xml",true);
xmlHttp.send(null);
}
function test()
{
if(xmlHttp.readyState==4)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
for(var i=0;i<xmlDoc.getElementsByTagName("Game").length;i++)
{
Title = document.createElement("span");
var a = document.createElement("b");
var h = document.createElement("span");
a.appendChild(document.createTextNode("Game Title: "));
h.appendChild(document.createTextNode(xmlDoc.getElementsByTagName("Game")[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue+" "))
Title.appendChild(a);
Title.appendChild(h);
Category = document.createElement("span");
a = document.createElement("b");
h = document.createElement("span");
a.appendChild(document.createTextNode("Genre: "));
h.appendChild(document.createTextNode(xmlDoc.getElementsByTagName("Game")[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue+" "))
Category.appendChild(a);
Category.appendChild(h);
Platform = document.createElement("spaan");
a = document.createElement("b");
h = document.createElement("span");
a.appendChild(document.createTextNode("Platform: "));
h.appendChild(document.createTextNode(xmlDoc.getElementsByTagName("Game")[i].getElementsByTagName("Platform")[0].getElementsByTagName("Title")[0].childNodes[0].nodeValue))
Platform.appendChild(a);
Platform.appendChild(h);
if(document.getElementById("spil").hasChildNodes()) document.getElementById("spil").appendChild(document.createElement("br"));
document.getElementById("spil").appendChild(Title);
document.getElementById("spil").appendChild(Category);
document.getElementById("spil").appendChild(Platform);
}
}
}
</script>
</head>
<body onLoad="loadXML()">
<div id="spil"></div>
</body>
</html>

I hope someone can help me make this less messy :)

Thanks
AzaraT

JKnoch

01-06-2008, 10:29 PM

I looked over the page you want your page to look at and thought it would be easily made using a transform with a xsl file. I looked over your source code, but didn't completely follow your coding as I just have a working knowledge of ajax and can't code anything from scratch.

The xsl file would basically generated your entire page, from a small file.

AzaraT

01-07-2008, 06:07 AM

Okay, are you able to make such a XSL script for me then :) ? (I looked at it fast but didn't really understand how it should be made)

JKnoch

01-07-2008, 10:11 PM

I just wrote you this long example for you, but the website timed out and when I went to preview it, it made me log back in and lost my post.

The gist of it can be found here:
http://www.w3schools.com/xsl/default.asp

There is alot of info there on how XSLT works. If you get lost, I'll give you a hand with the code, I just am to tired to rewrite it again tonite.

AzaraT

01-08-2008, 06:39 AM

aww that sucks, thanks anyway :D Just one thing, will the script be client side or server side (the script that loads the xml that is :)) ?

JKnoch

01-08-2008, 09:18 AM

It depends on how you write the pages.

How I do it at work is this:

We have a JSP that calls the database and makes the XML page all server side.

Technically the XML page never exists as a file because it is dynamically created.

The page the client side calls the XSL page and the created XML page. THe transform happens on the clients side. The depending on what form of AJAX you use, it can be on both the clients side and server side. In my opinion, the SPRY AjAX that adobe uses is almost completely clients side, but most true AJAX has to call back to the server but is still created on the client side.

You can use an XSL and XML transform without any server side database and have it all happen client side, I just dont think some of the really fancy "effects" will work.

JKnoch

01-08-2008, 09:18 AM

AzaraT

01-08-2008, 09:26 AM

okay, even thought the above script is client side, i need a server side script since the xml file has a IP filter on it, which means the server ip is allowed to use the xml file, but not the clients ip..

JKnoch

01-08-2008, 09:57 AM

This is where I am lucky, because at work I have a dedicated programer to handle this stuff, as this goes over my head a little.

Just so I am clear, you want the XML file to be safe on your server so no one can asscess it, but you want the server to pass the needed information over to the client side, so they can see the information they need but not the entire XML page.

This should work with the XSL file because it only calls over the information that is called in the from the XML file, not the entire file.

For example, all the information about how many games you have in stock and the price you pay for it in your XML file, but the XSL file only calls the information for the name and title of the game, it wont be sent over to the client side.

The information is read on the server side, but the page is made on the client side, so I believe that your IP filter code would still work. This is my understanding of how it works, but again, my programer worries about all the secucurity issues, so I'm not 100% sure.

AzaraT

01-08-2008, 09:58 AM

Okay I came up with this, i cannot test it since my server has changed IP and need to be allowed with the xml again, so for now, can you look trough the code and check if it will work ?

The xml is the same as in the first post, and the XSL looks like this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<title>Udgivelser i denne måned</title>
</head>

<body>

<table>
<tr>
<td>Spil</td>
<td>Platform</td>
<td>Categori</td>
<td>Udgivelses Dato</td>
</tr>
<tr>
<xsl:for-each select="Games/Game">
<td><xsl:value-of select="title" /></td></xsl:for-each>
<xsl:for-each select="Games/Game/Platform">
<td><xsl:value-of select="title" /></td></xsl:for-each>
<xsl:for-each select="Games/Game">
<td><xsl:value-of select="Category" /></td></xsl:for-each>
<xsl:for-each select="Games/Game/ReleaseDates">
<td><xsl:value-of select="Scandinavia" /></td></xsl:for-each>

</tr>
</table>
</body>
</html>
</xsl:template>

Thanks for the help mate :D

AzaraT

01-09-2008, 01:38 PM

Okay it does not work, you can see the problem here:http://www.zorps.dk/release_list/release_list2.asp

First of all, it does not load the platform title, and paste all the info in the same row, and doesn't make a new row for each game as I wanted, hope you can assist me abit here :)

Cheers
AzaraT

JKnoch

01-09-2008, 04:57 PM

I'm leaving work in about 2 hours, so i can pop online and get you started with a betters XSL file so it starts to look proper.

JKnoch

01-09-2008, 09:33 PM

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<title>Udgivelser i denne måned</title>
</head>

<body>

<table>
<tr>
<td>Game</td>
<td>title</td>
<td>platform</td>
<td>category</td>
<td>release dates</td>
<td>scandinavia</td>
</tr>

<xsl:apply-templates select="Games"/>
</table>
</xsl:template>

<xsl:template match="Games">
<tr>
<td><xsl:for-each select="Game" /></td>
<td><xsl:value-of select="Game/title" /></td>
<td><xsl:for-each select="Game/Platform" /></td>
<td><xsl:value-of select="Game/Category" /></td>
<td><xsl:for-each select="Game/ReleaseDates" /></td>
<td><xsl:value-of select="Game/Scandinavia" /></td>
</tr>
</xsl:template>
</body>
</html>

I wrote this really quick so there may be some spelling errors, but basically I made a template,"Games" that repeats the all the information of "game, title, platform, ect.. The template repeats for each value in Games Level of the XML page you have.

I also write most of my code in short hand and write all my XML in short hand because I feel it is easier to follow and to write.

AzaraT

01-10-2008, 11:30 AM

Hi there :)

I not really sure about this, but, in the first line, what data with output there ? basicly if you take a look at the xml file, the <game> contains the other data, like releasedates etc. Also it should reapeat for each <game> and not <games> but is the editing <xsl:apply-templates select="Games"/> and <xsl:template match="Games"> to Game instead of Games?

Thanks for helping again :)

edit: oh I figured it out, it works like a charm now :) One thing thought, is it possible to change the background color of every 2th row ?

JKnoch

01-10-2008, 12:29 PM

Yeah I wasn't really paying to much attention to my typing, so I put the disclamer about the typing be off to be safe.

You can use alot of the XML commands to sort out the data. You can have rows and cells change colors depending on if the game is available ect..

The easiest way is to write a function with a <xsl:choose> or <xsl:if>

You can tell it to check the position of the node and if it is an Even number then is should be 1 color and if not it should be another color.

Google "XSL test functions", and you will see some many tutorials explaining and showing how to do many cool effects, and the code is actually very simple to use.