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

Posted on 2013-11-27
Medium Priority
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="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.)
LVL 45

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 45

Accepted Solution

Chris Stanyon earned 2000 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="//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
		//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', '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'));

<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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

LVL 14

Expert Comment

ID: 39682493

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?
LVL 45

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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
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)

624 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