Solved

Scoreboard doesn't display xml data

Posted on 2013-11-22
5
708 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 43

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 43

Accepted Solution

by:
Chris Stanyon earned 500 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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

627 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