XML\Jquery create listings based on user selection
Posted
by
Sirius Mane
on Stack Overflow
See other posts from Stack Overflow
or by Sirius Mane
Published on 2012-08-28T21:13:39Z
Indexed on
2012/08/28
21:38 UTC
Read the original article
Hit count: 306
Alright, so what I need to try and accomplish is having a static web page that will display information pulled from an XML document and render it to the screen without refreshing. Basic AJAX stuff I guess.
The trick is, as I'm trying to think this through I keep coming into 'logical' barriers mentally.
Objectives:
-Have a chart which displays baseball team names, wins, losses, ties. In my XML doc there is a 'pending' status, so games not completed should not be displayed.(Need help here)
-Have a selection list which allows you to select a team which is populated from XML doc. (done)
-Upon selecting a particular team from the aforementioned selection list the page should display in a separate area all of the planned games for that team. Including pending. Basically all of the games associated with that team and the dates (which is included in the XML file). (Need help here)
What I have so far:
HTML\JS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="batty.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Little Batty League</title>
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var IE = window.ActiveXObject ? true: false;
var MOZ = document.implementation.createDocument ? true: false;
$(document).ready(function(){
$.ajax({
type: "GET",
url: "schedule.xml",
dataType: "xml",
success: function(xml) {
var select = $('#mySelect');
$(xml).find('Teams').each(function(){
var title = $(this).find('Team').text();
select.append("<option/><option class='ddheader'>"+title+"</option>");
});
select.children(":first").text("please make a selection").attr("selected",true);
}
});
});
</script>
</script>
</head>
<body onLoad="init()">
<!-- container start -->
<div id="container">
<!-- banner start -->
<div id="banner">
<img src="images/mascot.jpg" width="324" height="112" alt="Mascot" />
<!-- buttons start -->
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div class="menuButton"><a href="index.html">Home</a></div></td>
<td><div class="menuButton"><a href="schedule.html">Schedule</a></div></td>
<td><div class="menuButton"><a href="contact.html">Contact</a></div></td>
<td><div class="menuButton"><a href="about.html">About</a></div></td>
</tr>
</table>
<!-- buttons end -->
</div>
<!-- banner end -->
<!-- content start -->
<div id="content">
<br />
<form>
<select id="mySelect">
<option>please make a selection</option>
</select>
</form>
</div>
<!-- content end -->
<!-- footer start -->
<div id="footer">
© 2012 Batty League
</div>
<!-- footer end -->
</div>
<!-- container end -->
</body>
</html>
And the XML is:
<?xml version="1.0" encoding="utf-8"?>
<Schedule season="1">
<Teams>
<Team>Bluejays</Team>
</Teams>
<Teams>
<Team>Chickens</Team>
</Teams>
<Teams>
<Team>Lions</Team>
</Teams>
<Teams>
<Team>Pixies</Team>
</Teams>
<Teams>
<Team>Zombies</Team>
</Teams>
<Teams>
<Team>Wombats</Team>
</Teams>
<Game status="Played">
<Home_Team>Chickens</Home_Team>
<Away_Team>Bluejays</Away_Team>
<Date>2012-01-10T09:00:00</Date>
</Game>
<Game status="Pending">
<Home_Team>Bluejays </Home_Team>
<Away_Team>Chickens</Away_Team>
<Date>2012-01-11T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Bluejays</Home_Team>
<Away_Team>Lions</Away_Team>
<Date>2012-01-18T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Lions</Home_Team>
<Away_Team>Bluejays</Away_Team>
<Date>2012-01-19T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Bluejays</Home_Team>
<Away_Team>Pixies</Away_Team>
<Date>2012-01-21T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Pixies</Home_Team>
<Away_Team>Bluejays</Away_Team>
<Date>2012-01-23T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Bluejays</Home_Team>
<Away_Team>Zombies</Away_Team>
<Date>2012-01-25T09:00:00</Date>
</Game>
<Game status="Pending">
<Home_Team>Zombies</Home_Team>
<Away_Team>Bluejays</Away_Team>
<Date>2012-01-27T09:00:00</Date>
</Game>
<Game status="Pending">
<Home_Team>Bluejays</Home_Team>
<Away_Team>Wombats</Away_Team>
<Date>2012-01-28T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Wombats</Home_Team>
<Away_Team>Bluejays</Away_Team>
<Date>2012-01-30T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Chickens</Home_Team>
<Away_Team>Lions</Away_Team>
<Date>2012-01-31T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Lions</Home_Team>
<Away_Team>Chickens</Away_Team>
<Date>2012-02-04T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Chickens</Home_Team>
<Away_Team>Pixies</Away_Team>
<Date>2012-02-05T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Pixies</Home_Team>
<Away_Team>Chickens</Away_Team>
<Date>2012-02-07T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Chickens</Home_Team>
<Away_Team>Zombies</Away_Team>
<Date>2012-02-08T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Zombies</Home_Team>
<Away_Team>Chickens</Away_Team>
<Date>2012-02-10T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Lions</Home_Team>
<Away_Team>Pixies</Away_Team>
<Date>2012-02-12T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Pixies </Home_Team>
<Away_Team>Lions</Away_Team>
<Date>2012-02-14T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Lions</Home_Team>
<Away_Team>Zombies</Away_Team>
<Date>2012-02-15T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Zombies</Home_Team>
<Away_Team>Lions</Away_Team>
<Date>2012-02-16T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Lions</Home_Team>
<Away_Team>Wombats</Away_Team>
<Date>2012-01-23T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Wombats</Home_Team>
<Away_Team>Lions</Away_Team>
<Date>2012-02-24T09:00:00</Date>
</Game>
<Game status="Pending">
<Home_Team>Pixies</Home_Team>
<Away_Team>Zombies</Away_Team>
<Date>2012-02-25T09:00:00</Date>
</Game>
<Game status="Pending">
<Home_Team>Zombies</Home_Team>
<Away_Team>Pixies</Away_Team>
<Date>2012-02-26T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Pixies</Home_Team>
<Away_Team>Wombats</Away_Team>
<Date>2012-02-27T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Wombats</Home_Team>
<Away_Team>Pixies</Away_Team>
<Date>2012-02-28T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Zombies</Home_Team>
<Away_Team>Wombats</Away_Team>
<Date>2012-02-04T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Wombats</Home_Team>
<Away_Team>Zombies</Away_Team>
<Date>2012-02-05T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Wombats</Home_Team>
<Away_Team>Chickens</Away_Team>
<Date>2012-02-07T09:00:00</Date>
</Game>
<Game status="Played">
<Home_Team>Chickens</Home_Team>
<Away_Team>Wombats</Away_Team>
<Date>2012-02-08T09:00:00</Date>
</Game>
</Schedule>
If anybody can point me to Jquery code\modules that would greatly help me with this I'd be appreciate. Any help right now would be great, I'm just banging my head against a wall. I'm trying to avoid using XSLT transforms because I absolutely despise XML and I'm not good with it.
So I'd -like- to just use Javascript\PHP\etc with only a sprinkling of the necessary XML where possible..
© Stack Overflow or respective owner
