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

Posted on 2013-11-27
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
Question by:powerztom
  • 3
  • 2
LVL 14

Expert Comment

ID: 39682447
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=""></script>
    <script src=""></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.)
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39682480
@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)
LVL 43

Accepted Solution

Chris Stanyon earned 500 total points
ID: 39682486
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">
	<meta charset="utf-8" />
	<title>Player Table</title>
	<script src="//"></script>
	<script src="//"></script>
	<link rel="stylesheet" href="//" type="text/css" media="screen" charset="utf-8"/>

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

			type: "GET",
			url: xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml"
			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!
	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', '' + $(this).attr('TeamID') + '.png');
				playerImg = $('<img>').attr('src', '' + $(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'));

<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; }

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

	<div id="starting">
		<div class="playLog">
		<table class="players" cellspacing='0' cellpadding='0'>
				<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>
				<tr class="rowTemplate"><td class="playerName"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

	<div id="benched">
		<div class="playLog">
		<table class="players" cellspacing='0' cellpadding='0'>
				<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>
			<tr class="rowTemplate">
				<td class="playerName"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

Open in new window

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

LVL 14

Expert Comment

ID: 39682493

When I received the files, the contents had the src string in this format:
    <script src="//"></script>

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

Expert Comment

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

Author Closing Comment

ID: 39690017
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.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)

861 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