Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Scoreboard doesn't display xml data

Posted on 2013-11-22
5
Medium Priority
?
717 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 44

Expert Comment

by:Chris Stanyon
ID: 39670015
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
ID: 39670085
Chris almost everything is cool except I'm not seeing any images or logos for the teams.
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39670192
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
ID: 39670223
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
ID: 39675011
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

916 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