Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Scoreboard doesn't display xml data

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

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 45

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses
Course of the Month14 days, 21 hours left to enroll

577 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