Replace XML Value in HTML

Question

I have a scoreboard on my website that gets scores from an XML file. It's very easy for others to update, except for highlighting the winner.

This is a sample game from the XML file:

<game>
<month>05</month><day>25</day><year>11</year>
<type>Football</type>
<homeName>Wildcats</homeName><homeScore>45</homeScore><homeWinner></homeWinner>
<awayName>Bruins</awayName><awayScore>55</awayScore><awayWinner>y</awayWinner>
</game>

As you can see, I want them to simply check the winner. However, when it loads in HTML, I want the y to be replaced with an arrow image.

It's a Spry scoreboard, so here's the relevant HTML:

<script type="text/javascript">
var dsScoreboard = new Spry.Data.XMLDataSet("scoreboard.xml", "scoreboard/game", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
dsScoreboard.setColumnType("date", "date");
</script>

<div spry:region="dsScoreboard">
<table class="scoreboard" cellspacing="15" cellpadding="0" border="0">
    <tr>
    <td spry:repeat="dsScoreboard">
        <table class="game" cellspacing="0" cellpadding="0" border="0">
        <tr>
        <td class="date month">{month}</td>
        <td class="type" colspan="3">{type}</td>
        </tr>
        <tr>
        <td class="date day">{day}</td>
        <td class="winner">{awayWinner}</td>
        <td class="name">{awayName}</td>
        <td class="score">{awayScore}</td>
        </tr>
        <tr>
        <td class="date year">{year}</td>
        <td class="winner">{homeWinner}</td>
        <td class="name">{homeName}</td>
        <td class="score">{homeScore}</td>
        </tr>
        </table>
    </td>    
    </tr>
</table>
</div>

So the output HTML for the winner cell should be something like:

<td class="winner"><img src="arrow.png" /></td>

instead of:

<td class="winner">y</td>

Can this be easily done? Thank you.

Welcome to SO. You haven't provided enough context or information for anybody to help you. Please describe the environment in more detail, i.e. show a minimal complete input XML and desired output HTML, and describe how you're currently converting the XML to HTML. — Jim Garrison
– Jim Garrison, Commented May 25, 2011 at 19:10

Ryley · Accepted Answer · 2011-05-25 19:55:22Z

1

What you want is a spry:choose. I have never used spry, but it's something vaguely like this:

<td class="winner">
  <span spry:choose="spry:choose">
    <img src="arrow.png" spry:when="'{homeWinner}' == 'y'" />
    <span spry:default="spry:default"></span>
  </span>
</td>

answered May 25, 2011 at 19:55

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Beau Over a year ago

Thanks a lot, Ryley. That's almost perfect. Per Adobe's article, I just put the spry:when statement in a span tag and wrapped it around the img tag. It works great.

Collectives™ on Stack Overflow

Replace XML Value in HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related