[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2013-11-27
6
Medium Priority
?
237 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
[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
6 Comments
 
LVL 14

Expert Comment

by:jb1dev
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.)
0
 
LVL 44

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)
0
 
LVL 44

Accepted Solution

by:
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">
	<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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:jb1dev
ID: 39682493
@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 44

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

Author Closing Comment

by:powerztom
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

649 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