Databases
StackOverflow2013
Postsdbo
POXML\Jquery create listings based on user selection
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POXML\Jquery create listings based on user selection
    text
    copied!<p>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. </p> <p>The trick is, as I'm trying to think this through I keep coming into 'logical' barriers mentally. </p> <p>Objectives:</p> <p>-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.<strong>(Need help here)</strong></p> <p>-Have a selection list which allows you to select a team which is populated from XML doc. (done)</p> <p>-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). <strong>(Need help here)</strong></p> <p>What I have so far:</p> <p>HTML\JS </p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="batty.css" type="text/css" /&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Little Batty League&lt;/title&gt; &lt;script type="text/javascript" src="library.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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("&lt;option/&gt;&lt;option class='ddheader'&gt;"+title+"&lt;/option&gt;"); }); select.children(":first").text("please make a selection").attr("selected",true); } }); }); &lt;/script&gt; &lt;/script&gt; &lt;/head&gt; &lt;body onLoad="init()"&gt; &lt;!-- container start --&gt; &lt;div id="container"&gt; &lt;!-- banner start --&gt; &lt;div id="banner"&gt; &lt;img src="images/mascot.jpg" width="324" height="112" alt="Mascot" /&gt; &lt;!-- buttons start --&gt; &lt;table width="900" border="0" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td&gt;&lt;div class="menuButton"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="menuButton"&gt;&lt;a href="schedule.html"&gt;Schedule&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="menuButton"&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="menuButton"&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;!-- buttons end --&gt; &lt;/div&gt; &lt;!-- banner end --&gt; &lt;!-- content start --&gt; &lt;div id="content"&gt; &lt;br /&gt; &lt;form&gt; &lt;select id="mySelect"&gt; &lt;option&gt;please make a selection&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- content end --&gt; &lt;!-- footer start --&gt; &lt;div id="footer"&gt; &amp;copy; 2012 Batty League &lt;/div&gt; &lt;!-- footer end --&gt; &lt;/div&gt; &lt;!-- container end --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And the XML is:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;Schedule season="1"&gt; &lt;Teams&gt; &lt;Team&gt;Bluejays&lt;/Team&gt; &lt;/Teams&gt; &lt;Teams&gt; &lt;Team&gt;Chickens&lt;/Team&gt; &lt;/Teams&gt; &lt;Teams&gt; &lt;Team&gt;Lions&lt;/Team&gt; &lt;/Teams&gt; &lt;Teams&gt; &lt;Team&gt;Pixies&lt;/Team&gt; &lt;/Teams&gt; &lt;Teams&gt; &lt;Team&gt;Zombies&lt;/Team&gt; &lt;/Teams&gt; &lt;Teams&gt; &lt;Team&gt;Wombats&lt;/Team&gt; &lt;/Teams&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Chickens&lt;/Home_Team&gt; &lt;Away_Team&gt;Bluejays&lt;/Away_Team&gt; &lt;Date&gt;2012-01-10T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Pending"&gt; &lt;Home_Team&gt;Bluejays &lt;/Home_Team&gt; &lt;Away_Team&gt;Chickens&lt;/Away_Team&gt; &lt;Date&gt;2012-01-11T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Bluejays&lt;/Home_Team&gt; &lt;Away_Team&gt;Lions&lt;/Away_Team&gt; &lt;Date&gt;2012-01-18T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Lions&lt;/Home_Team&gt; &lt;Away_Team&gt;Bluejays&lt;/Away_Team&gt; &lt;Date&gt;2012-01-19T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Bluejays&lt;/Home_Team&gt; &lt;Away_Team&gt;Pixies&lt;/Away_Team&gt; &lt;Date&gt;2012-01-21T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Pixies&lt;/Home_Team&gt; &lt;Away_Team&gt;Bluejays&lt;/Away_Team&gt; &lt;Date&gt;2012-01-23T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Bluejays&lt;/Home_Team&gt; &lt;Away_Team&gt;Zombies&lt;/Away_Team&gt; &lt;Date&gt;2012-01-25T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Pending"&gt; &lt;Home_Team&gt;Zombies&lt;/Home_Team&gt; &lt;Away_Team&gt;Bluejays&lt;/Away_Team&gt; &lt;Date&gt;2012-01-27T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Pending"&gt; &lt;Home_Team&gt;Bluejays&lt;/Home_Team&gt; &lt;Away_Team&gt;Wombats&lt;/Away_Team&gt; &lt;Date&gt;2012-01-28T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Wombats&lt;/Home_Team&gt; &lt;Away_Team&gt;Bluejays&lt;/Away_Team&gt; &lt;Date&gt;2012-01-30T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Chickens&lt;/Home_Team&gt; &lt;Away_Team&gt;Lions&lt;/Away_Team&gt; &lt;Date&gt;2012-01-31T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Lions&lt;/Home_Team&gt; &lt;Away_Team&gt;Chickens&lt;/Away_Team&gt; &lt;Date&gt;2012-02-04T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Chickens&lt;/Home_Team&gt; &lt;Away_Team&gt;Pixies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-05T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Pixies&lt;/Home_Team&gt; &lt;Away_Team&gt;Chickens&lt;/Away_Team&gt; &lt;Date&gt;2012-02-07T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Chickens&lt;/Home_Team&gt; &lt;Away_Team&gt;Zombies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-08T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Zombies&lt;/Home_Team&gt; &lt;Away_Team&gt;Chickens&lt;/Away_Team&gt; &lt;Date&gt;2012-02-10T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Lions&lt;/Home_Team&gt; &lt;Away_Team&gt;Pixies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-12T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Pixies &lt;/Home_Team&gt; &lt;Away_Team&gt;Lions&lt;/Away_Team&gt; &lt;Date&gt;2012-02-14T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Lions&lt;/Home_Team&gt; &lt;Away_Team&gt;Zombies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-15T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Zombies&lt;/Home_Team&gt; &lt;Away_Team&gt;Lions&lt;/Away_Team&gt; &lt;Date&gt;2012-02-16T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Lions&lt;/Home_Team&gt; &lt;Away_Team&gt;Wombats&lt;/Away_Team&gt; &lt;Date&gt;2012-01-23T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Wombats&lt;/Home_Team&gt; &lt;Away_Team&gt;Lions&lt;/Away_Team&gt; &lt;Date&gt;2012-02-24T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Pending"&gt; &lt;Home_Team&gt;Pixies&lt;/Home_Team&gt; &lt;Away_Team&gt;Zombies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-25T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Pending"&gt; &lt;Home_Team&gt;Zombies&lt;/Home_Team&gt; &lt;Away_Team&gt;Pixies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-26T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Pixies&lt;/Home_Team&gt; &lt;Away_Team&gt;Wombats&lt;/Away_Team&gt; &lt;Date&gt;2012-02-27T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Wombats&lt;/Home_Team&gt; &lt;Away_Team&gt;Pixies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-28T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Zombies&lt;/Home_Team&gt; &lt;Away_Team&gt;Wombats&lt;/Away_Team&gt; &lt;Date&gt;2012-02-04T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Wombats&lt;/Home_Team&gt; &lt;Away_Team&gt;Zombies&lt;/Away_Team&gt; &lt;Date&gt;2012-02-05T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Wombats&lt;/Home_Team&gt; &lt;Away_Team&gt;Chickens&lt;/Away_Team&gt; &lt;Date&gt;2012-02-07T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;Game status="Played"&gt; &lt;Home_Team&gt;Chickens&lt;/Home_Team&gt; &lt;Away_Team&gt;Wombats&lt;/Away_Team&gt; &lt;Date&gt;2012-02-08T09:00:00&lt;/Date&gt; &lt;/Game&gt; &lt;/Schedule&gt; </code></pre> <p>Edit: To be more concise:</p> <p>How would I pull out the information from the XML file using JS and display it on the page in a chart like format? </p> <p>How would I code the if statement for the selection list where once a particular team was chosen it would populate a different box (not the same one from the paragraph above) with information pertaining to JUST that team?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload