Scoreboard doesn't display xml data

I'm creating a NHL Scoreboard that scrolls to left or right. I'm not sure if I'm running into Cross Domain Policy but My computer is in the domain and then I put page on webserver but still the scoreboard didn't appear. I have only one table with Id all set for xml data. So I didn't code for table to repeat ityself for the rest of today's games. And I wanted status at the bottom to be either a hyperlink or button that displays status but when you click pass game id but for now the button click can go on page document.write If you have any experience making tables repeat with different games appear and scroll that would be awesome. I wrote this simple code no Errors but doesn't work.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

function loadgames() {
	var theUrl;
      theUrl = "http://www.sportsnetwork.com/NHL.xml"
    
      $.ajax({
        type: "GET",
        url: theUrl,
        dataType: "xml",
        success: function(data){
          var d = $(data);
    d.find('game').each(function(i,game){
	  var game = $(Game);
                var id = game.attr("game_id").toLowerCase();
                var vteamid = game.attr('vteamid'); 
	 			var hteamid = game.attr('hteamid'); 
				var vteam = game.attr('vteam');
				var hteam = game.attr('hteam');
				var vscore = game.attr('vscore');
				var hscore = game.attr('hscore');
				var status = game.attri('status');
		
		$('#imgvteam').attr('src', 'http://powerzsoftware.com/tsn/Logos/' + id + ".png");
		$('#imghteam').attr('src', 'http://powerzsoftware.com/tsn/Logos/' + id + ".png");
		 $('#txtaway').html(vteam);
		  $('#txthome').html(hteam);
		   $('#txtascore').html(vscore);
		  $('#txthscore').html(hscore);
		  $('#txtstatus').html(status);
			}); 	
	 }
      }); 

}
$(document).ready(function(){
	loadgames(); 
		
	
 }); 	


</script>
</head>

<body>
<table width="222" border="0">
  <tr>
    <td width="50"><div align="center"><img src="Logos/129.png" name="imgvteam" width="32" height="32" id="imgvteam"></div></td>
    <td width="155"><div align="center" id="txtaway"></div></td>
    <td width="32"><div align="center" id="txtascore"></div></td>
  </tr>
  <tr>
    <td><div align="center"><img src="Logos/129.png" alt="" name="imghteam" width="32" height="32" id="imghteam"></div></td>
    <td><div align="center" id="txthome"></div></td>
    <td><div align="center" id="txthscore"></div></td>
  </tr>
  <tr>
    <td colspan="3"><div align="center" id="txtstatus"></div></td>
  </tr>
</table>
</body>
</html>

Open in new window

Attached is the xml file and html but I need web page to be dynamic and static.Thanks EE
DailyNHL.html
NHL.xml

JavaScriptjQueryXML

Last Comment

Tom Powers

8/22/2022 - Mon

Chris Stanyon

11/22/2013

Couple of things of note. The data you need from the XML are not stored as attributes - they're stored as the text values of nodes

<node attribute="value" attribute="value"/>
<node>value</node>
<node>value</node>

Open in new window

Remember, javascript is case sensitive - in your code you pass in game and then try and use Game

Have a play with this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q_28301645 // Chris Stanyon</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url: 'NHL.xml',
		dataType: "xml"
	}).done(function(data) {
		$('game', data).each(function(i, game) {
			newGame = $('#gameTemplate').clone().removeAttr('id');
			
			$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/Logos/' + $('game_id', game).text() + '.png') );
			$('.awayTeam', newGame).html( $('vteam', game).text() );
			$('.awayScore', newGame).html( $('vscore', game).text() );

			$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/Logos/' + $('game_id', game).text() + '.png') );
			$('.homeTeam', newGame).html( $('hteam', game).text() );
			$('.homeScore', newGame).html( $('hscore', game).text() );

			$('.gameStatus', newGame).html( $('status', game).text() );

			$('#games').append(newGame);			
		});
	});
});
</script>
<style type="text/css" media="screen">
	#gameTemplate { display:none; }
	.gameLog { width: 222px; border-collapse:collapse; margin-bottom: 10px; }
	.gameLog td { text-align: center;  border: 1px solid #E8E1E1; }
	.gameLog col:nth-child(1) { width: 50px; }
	.gameLog col:nth-child(2) { width: 155px; }
	.gameLog col:nth-child(3) { width: 32px; }	
	.awayLogo img, .homeLogo img { width: 32px; height: 32px; }
</style>
</head>

<body>
		
<div id="games"></div>
		
<table id="gameTemplate" class="gameLog">
	<colgroup><col><col><col></colgroup>
	<tr>
		<td class="awayLogo"></td>
		<td class="awayTeam"></td>
		<td class="awayScore"></td>
	</tr>
	<tr>
		<td class="homeLogo"></td>
		<td class="homeTeam"></td>
		<td class="homeScore"></td>
	</tr>
	<tr>
		<td colspan="3" class="gameStatus"></td>
	</tr>
</table>
		
</body>
</html>

Open in new window

Tom Powers

11/22/2013

ASKER

Chris almost everything is cool except I'm not seeing any images or logos for the teams.

ASKER CERTIFIED SOLUTION

Chris Stanyon

11/22/2013

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Tom Powers

11/22/2013

ASKER

My Bad I should have saw that one but overall excellent code Chris defines everything in code rather then using a UI Designer. I learned Clone Today which is cool I can add a few new tricks up my sleeve cause of Chris. Thank You.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Tom Powers

11/25/2013

ASKER

Yo Chris,

What up got a ticket for you based on your scores which works awesome now I just need it to marquee like automatic scrolling then repeat when it comes to the end and have status turned into a linkbutton which displays game id when clicked. This one I am clueless can you assist cause your familiar with this ticket. Thanks Chris

https://www.experts-exchange.com/questions/28303137/Marquee-scores-and-make-linkbutton-Jquery.html