Solved

Scoreboard doesn't display xml data

Posted on 2013-11-22
5
550 Views
Last Modified: 2013-11-25
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
0
Comment
Question by:powerztom
  • 3
  • 2
5 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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

0
 

Author Comment

by:powerztom
Comment Utility
Chris almost everything is cool except I'm not seeing any images or logos for the teams.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
OK. In your original code, you were creating the img src based on the game_id, which is what I did.

To see the team logos, change the 2 <img> lines to use the vteamid and hteamid (lines 16 and 20):

<!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/' + $('vteamid', 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/' + $('hteamid', 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

0
 

Author Closing Comment

by:powerztom
Comment Utility
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.
0
 

Author Comment

by:powerztom
Comment Utility
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

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28303137.html
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now