Solved

data display apond Doc Load but stats arenot updated as game goes on Timers are being used.

Posted on 2013-11-27
6
228 Views
Last Modified: 2013-12-02
Apond Page Load two tables get loaded with xml game stats. I have a two Tab Panel gadget working with one table on each Panel. I had code running where the Bench Tab kept appending new players to the table I changed code around and got Starting Five table has players appended making the table grow and grow The Code I have for Updateing data uses newrow which to me doesn't seem right Right now I have two timers one for each panel.
Now both ntables are loaded correctly with the correct amount of players Once you see a player without a team's logo that player is extra and doesn't belong. I noticed these last night while watching a NBA Game after a player scored his point total didnot increase unless I manually clickeds refresh. So Testing you can changed a stat value for a player and see if it gets updated using timers. Thanks EE
New-Folder.zip
0
Comment
Question by:powerztom
  • 3
  • 2
6 Comments
 
LVL 14

Expert Comment

by:jb1dev
Comment Utility
This is actually working fine for me (I'm using firefox.)

I had to change the xml file name from
19039.XML to 19039.xml

As it is case sensitive on my platform, and I had to change this line
 var xmlGameID = '19039';

So that the game id matched the xml file included in the zip file.

I also had to add the "http:" protocol to the src attribute of the script tags
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


Other than that I can confirm this works. (I should note you might want to do some refactoring. This is duplicating code for each table. This effectively means you have to write, fix and maintain twice as much.)
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
@jb1dev - Best practice to NOT add http: to the scripts. Leave it off and google will serve the right files for the right protocol (http & https)
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
Hey Tom,

Wow - you really do like your timers, don't you :)

Have a look a this. Changed the IDs to Classes, so you can have multiple tables, and split out the code that actually populates the table into a separate fucntion. Also cleaned up the bit that updates rather than inserts a new record.

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Player Table</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

	<script type="text/javascript">
	$(document).ready(function() {
		//setup the tabs
		$('#tabs').tabs();
		
		//load in the XML file
		loadData();
	});
	
	
	function loadData() {
		var xmlPath = '.';
		var xmlGameID = '19039';

		$.ajax({
			type: "GET",
			url: xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml"
		}).done(function(data){
			var gameData = $(data);
			
			//update the starting players
			startingPlayers = $('Player', gameData).filter(function() { return $(this).attr('Started') == '1'});
			populateTable(startingPlayers, $('#starting'));
			
			//update the benched players
			benchedPlayers = $('Player', gameData).filter(function() { return $(this).attr('Started') == '0'});
			populateTable(benchedPlayers, $('#benched'));
			
			//start all over again in 3 seconds!
			setTimeout(loadData,3000);
		});
	}
	
	
	function populateTable(players, tableToUpdate) {
		$(players).each(function(i, player) {
			
			//are we updating or inserting
			playerRow = $('.players tbody tr', tableToUpdate).filter(function() { return $(this).data('playerID') == $(player).attr('ID') });

			if (!playerRow.length) {
				//we're adding a new player
				playerRow = $('.rowTemplate', tableToUpdate).clone().removeClass('rowTemplate').data('playerID', $(this).attr('ID') );
				TeamImg = $('<img>').attr('src', 'http://dev.sportsnetwork.com/aspdata/NBA/Images/miniNBALogos/' + $(this).attr('TeamID') + '.png');
				playerImg = $('<img>').attr('src', 'http://images.sportsnetwork.com/bask/nba/atthecourt/players/' + $(this).attr('ID') + '.jpg');
				playerName = $('<p>').html( $(this).attr('Firstname') + ' ' + $(this).attr('Lastname') + ' (' + $(this).attr('Position') + ')');

				$('td:nth-child(1)', playerRow).html( playerImg ).append( TeamImg ).append( playerName );
				$('.players tbody', tableToUpdate).append(playerRow);
			};
			
			//add the data to the players row
			$('td:nth-child(2)', playerRow).html( $(this).attr('Points'));
			$('td:nth-child(3)', playerRow).html( $(this).attr('Assists'));
			$('td:nth-child(4)', playerRow).html( $(this).attr('ORebounds'));
			$('td:nth-child(5)', playerRow).html( $(this).attr('DRebounds'));
			$('td:nth-child(6)', playerRow).html( $(this).attr('Steals'));
			$('td:nth-child(7)', playerRow).html( $(this).attr('BlockedShots'));
			$('td:nth-child(8)', playerRow).html( $(this).attr('TresMade'));
		});
	}
</script>

<style type="text/css">
	.playLog { overflow: hidden; width: 860px; border: 1px solid grey; height: 314px; } 

	.players thead tr { background-color: #0099CC; color: #000; display:block; position:relative; }
	.players thead th, .players tbody td { padding: 3px; width: 153px; border-color: #dddddd; border-style: solid solid none none; border-width: 1px; }
	.players thead th.playerName, .players tbody td.playerName { width: 153px; }
	
	.players tbody td:nth-child(8) { width: 76px; }
	.players tbody { display: block; height: 288px;  overflow: auto; width: 100%; } 	
	.players tbody tr { cursor: pointer; }
	.players tbody td { text-align:center; }

	.rowTemplate { display:none; }
</style>
</head>

<body>
	 
<div id="tabs">
	<ul>
		<li><a href="#starting">Starting Players</a></li>
		<li><a href="#benched">Benched Players</a></li>
	</ul>

	<div id="starting">
		<div class="playLog">
		<table class="players" cellspacing='0' cellpadding='0'>
			<thead>
				<tr><th class="playerName">PlayerName</th><th>Points</th><th>Assists</th><th>ORebounds</th><th>DRebounds</th><th>Steals</th><th>Blocks</th><th>TresMade</th></tr>
			</thead>
			<tbody>
				<tr class="rowTemplate"><td class="playerName"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
			</tbody>
		</table>
		</div>
	</div>

	<div id="benched">
		<div class="playLog">
		<table class="players" cellspacing='0' cellpadding='0'>
			<thead>
				<tr><th class="playerName">PlayerName</th><th>Points</th><th>Assists</th><th>ORebounds</th><th>DRebounds</th><th>Steals</th><th>Blocks</th><th>TresMade</th></tr>
			</thead>
			<tbody>
			<tr class="rowTemplate">
				<td class="playerName"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
			</tbody>
		</table>
		</div>
	</div>
</div>
	
</body>
</html>

Open in new window

0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 14

Expert Comment

by:jb1dev
Comment Utility
@ChrisStanyon

Chris,
When I received the files, the contents had the src string in this format:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

On my platform at least, that does not work. Is this syntax really supported?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Not only is it supported - it's recommended. It works on all platforms!! You must have another problem.
0
 

Author Closing Comment

by:powerztom
Comment Utility
Excellent code. Chris I need some things done you said that your not cheap. What is not cheap ? I would be paying you out of my pocket and not my companies The work is too much too KEEP asking EE. Yes it has to do with what we're doing now it would be hockey and then depending on your costs taking IFRAMES and making them into a single js web page that runs efficiently so let me know. Great job on this ticket your elite.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

763 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

12 Experts available now in Live!

Get 1:1 Help Now