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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)

730 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