• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 298
  • Last Modified:

Filter and display a particular value and display it in the game log table.

I have a html table of xml data one column is xml attrib called Playtype I wanted to filter the html table using a dropdown and button. A expert helped me do one for football. This one for hockey is different so I cannot apply same code to this one. Looking for Chris S. I started coding on part 2 of this webapp. So just disregard that code in the html doc
  • 3
  • 3
1 Solution
Chris StanyonCommented:
Hey powerztom,

I've had a quick look at your code and there's a lot going on that I don't get! Do you want this to behave in a similar way to your previous question?
powerztomAuthor Commented:
Yeah the thing is this code I got some help with and is different from yours but all I want is to have it work just like the football the way you did. The current play row this there just have dropdown below game log table and filtering to but I know this one is going to be a bitch.But ignore the color and half coded functions I'm going to spilt this up One part is filter and html table and 2nd part is canvas drawing symbols on screen. don't worry about 2nd part. And no rush bro when you can get to it. Thanks
Chris StanyonCommented:
Have a play with this. Haven't tested it fully, so you may need to tweak, but hopefully you'll get the general idea. Any questions, just ask:

<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8" />
		<title>Q_28291883 // Chris Stanyon</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			//The DOMs ready so lets get started
		function getData() {
			//grab the XML file with an AJAX request. Once we've got it, call the processGame function
			xmlPath = '.';
			xmlGameID = '17996';
			gameFile = xmlPath + '/' + xmlGameID + '.xml',

			$.ajaxSetup({ cache: false });
				url: gameFile,
				dataType: "xml"

		function processGame(gameData) {
			//convert the XML into a jQuery object
			game = $(gameData);
			currentPlay = game.find('Play').first();
			//set a timer to run the script again in 2 seconds

			//do we have new plays
			if (currentPlay.attr('Seq') == $('#currentPlay').data('currentSeq')) {
				console.log("No New Plays");

			//set up the Team Headers
			teams = new Array();

			$('Team', currentPlay).each(function(i, team) {
				//set the team name
				$('.' + $(this).attr('vh') + ' .teamName', '#teamHeaders').html( $(this).attr('name') );
				//set the team colours
				if (colourScheme = getColours($(this).attr('ID'), teams)) {
					$('.' + $(this).attr('vh') + ' .teamColour', '#teamHeaders')
						.css({'background-color': colourScheme.fillColour, 'border': 'solid 3px ' + colourScheme.lineColour});


			//set up the Current Play
			currentPlayTable = $('#currentPlay');
			currentPlayTable.data('currentSeq', currentPlay.attr('Seq'));
			playInfo = getPlayInfo(currentPlay);

			$('td:nth-child(1)', currentPlayTable).html( $('<img>').attr('src', playInfo.teamImg ) );
			$('td:nth-child(2)', currentPlayTable).html( $('<img>').attr('src', playInfo.playerImg ) );
			$('td:nth-child(3)', currentPlayTable).html( playInfo.playType );
			$('td:nth-child(4)', currentPlayTable).html( playInfo.playNarr );
			//add the play type to the filter dropdown
			if (!$("#playType option[value='" + playInfo.playType + "']").length) {
				$('#playType').append($('<option>').text( playInfo.playType ).val( playInfo.playType ));	

			//set up the Previous Plays
			lastPlay = $('#playLog tbody tr:first');
			lastPlay = (lastPlay.data('playSeq')) ? lastPlay.data('playSeq') : 0;
			//get the Seq of the play in the currentPlay table
			currentPlay = $('#currentPlay').data('currentSeq');
			//get the previous plays. This is a list of plays where the Seq is greater than the last play added and less than the current play
			previousPlays = $('PreviousPlays Play', game).filter(function() {
				return (parseInt($(this).attr('Seq')) > parseInt(lastPlay) && parseInt($(this).attr('Seq')) < parseInt(currentPlay))


			//Setup the canvas - not sure why yet!
			canvas = $('#myCanvas').get(0).getContext('2d');
			canvas.globalAlpha = 0.5;
		function getPlayInfo(play) {
			var teamID, playerID;
			var playTypes = {
				"GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
				"MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
				"BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
				"ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
				"HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
				"PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'}
			if ( playInfo = $(playTypes).attr( play.attr('PlayType')) ) {
				teamID = play.find(playInfo.subnode).attr(playInfo.teamidnode);
				playerID = play.find(playInfo.subnode).attr(playInfo.playeridnode);

			return {
				'teamImg'	: (teamID) ? 'http://images.sportsnetwork.com/nhl/attherink/logos/' + teamID + '.png': 'http://powerzsoftware.com/tsn/IMAGES/NHLLOGOX.png',
				'playerImg'	: (playerID) ? 'http://images.sportsnetwork.com/NHL/attherink/players/' + playerID + '.jpg' : 'http://powerzsoftware.com/tsn/IMAGES/sKATE.png',
				'playType'	: play.attr('PlayType'),
				'playNarr'	: play.find('narrative').attr('text')
		function setPreviousPlays(previousPlays) {
			console.log('Previous Plays');
			$(previousPlays).each(function(i, play) {
				playInfo = getPlayInfo($(play));
				//add the play types to the drop down
				if (!$("#playType option[value='" + $(this).attr('PlayType') + "']").length) {
				newRow = $('<tr>')
					.data({ playType: playInfo.playType, playSeq : $(play).attr('Seq') })
					.append( $('<td>').html( $('<img>').attr('src', playInfo.teamImg)))
					.append( $('<td>').html( $(play).attr('TimeLeft')))
					.append( $('<td>').html( playInfo.playType ).append( $('<img>').attr('src', playInfo.playerImg)))
					.append( $('<td>').html(playInfo.playNarr));
				//do we need to hide the play based on the filter?
				appliedFilter = $('#applyFilter').data('appliedFilter');
				if (appliedFilter && appliedFilter != "Show All" && $(this).attr('PlayType') != appliedFilter) {
				newRow.appendTo('#playLog tbody');
		function applyFilter() {
			console.log("Filtering on: " + $('#playType').val());

			//store the Filter type for later use
			$(this).data('appliedFilter', $('#playType').val());
			//before applying a new filter, clear the old one
			$('#playLog tr.hidden').removeClass('hidden');
			//if Show All isn't selected, we need to hide some rows
			if ($('#playType').val() != "Show All") {
				playsToHide = $('#playLog tr').filter(function() {
					return $(this).data('playType') != $('#playType').val();

		function getColours(teamID, teams) {
			var colourMatrix = {
				'145' : { lineColour: '#FFCC99', fillColour: '#91764C' },
				'133' : { lineColour: '#0000FF', fillColour: '#055B8D' },
				'140' : { lineColour: '#0000FF', fillColour: '#D93600', altTeams: ['138'], altColour: '#FF0000' },
				'148' : { lineColour: '#003366', fillColour: '#253E67', altTeams: ['139', '142'], altColour: '#FF0033' },
				'142' : { lineColour: '#000099', fillColour: '#07515F' } 
			colourScheme = colourMatrix[teamID];
			if (!colourScheme) { console.log('Colour Error'); return; };
			var altColour = false;
			$.each(teams, function(i,team) {
				if ($.inArray(team, colourScheme.altTeams) >= 0) {
					console.log("We need the Alternative Colour");
					altColour = true;
			teamColours = {
				lineColour: colourScheme.lineColour,
				fillColour: (altColour) ? colourScheme.altColour : colourScheme.fillColour
			return teamColours;

		<style type="text/css">
			#playLogScroll { height: 360px; overflow-y: scroll; width: 500px; border: 1px solid grey; }
			#playLogTemplate { display: none; }
			#playLog, #currentPlay { width: 360px; }
			#playLog col:nth-child(1), #currentPlay col:nth-child(1) { width: 16%; }
			#playLog col:nth-child(2), #currentPlay col:nth-child(2) { width: 16%; }
			#playLog col:nth-child(3), #currentPlay col:nth-child(3) { width: 25%; }
			#playLog col:nth-child(4), #currentPlay col:nth-child(4) { width: 43%; }
			#playLog tr.hidden { display:none }
			#teamHeaders .teamColour { display:inline-block; height: 30px; width: 50px; }

		<div id="teamHeaders">
			<div class="H">
				<span class="teamColour"></span>
				<span class="teamName"></span>
			<div class="A">
				<span class="teamColour"></span>
				<span class="teamName"></span>
		<canvas id="myCanvas" width="370" height="163"></canvas>
		<div id="filters">
				<select id="playType">
					<option value="Show All">Show All</option>
				<button id="applyFilter">Filter</button>
		<table id="currentPlay">
		<div id="playLogScroll">
			<table id="playLog">



Open in new window

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

powerztomAuthor Commented:
Some advanced code here Chris I tested it with a static game log. Preformed Great. Tonight I'm going to test it on a live hockey game. In the previous verision during live gameplay I'd get javascript messagebox saying script has become unresponsive continue or cancel buttons so it was suggested to me to use something like this setTimeout(getData,2000); and you have it. So It will be interesting to see. But as far as what I requested Chris you did a kick ass job. Thank You. Color schemes and canvas I'm going to separate that from this. To simplify.
Chris StanyonCommented:
lol. Yeah, some new stuff for you to get your head around, but most of it should be fairly straightforward - if there's something you don't understand, ask.

Obviously couldn't test with a live game, but it should be OK. You might want to implement some sort of 'check' before setting the timeout, so if the game is over, a timeout is no longer fired (I think we did this in a previous question by checking a STATUS === FINAL value!)

The thing about setting a timeout rather than an interval, is that it only ever gets set once the data has been received, so you're more unlikely to have clashes (i.e the script running again while it's still trying to receive it). To be honest, depending on the game, you could probably get away with setting it to 5 seconds. Your call.

Have a look through the bit of colour coding I put in. Your previous method was not really a good performer. Using lots of if/elseif statement is a slow way of going. Basically it runs through each if/elseif code block until it reaches a match, so potentially running 30 or 40 code blocks, just to find the one it needs.

I setup the colours in an array, and then just pulled the relevant data from it. Hopefully it makes sense. Couldn't see why you were setting colours with 0x and then converting them for the CSS.

Couldn't really see what you were trying to do with the canvas so left it alone.

Couple of tips for when developing code. Firstly, bin DreamWeaver. You only have to take a look at the crap it produces (all those functions starting MM). They look like they only create a mouse over, which can be done with 1 single line of CSS.

Also, when naming variables, use something that's meaningful. As you're pulling in game data, call it something like 'game'. Calling it 'd' make no sense. And this line:

var i1, i2, ii;

They mean nothing. You may know they mean now, or next week, but in a year - unlikely. And if others work on your code - no chance.

Finally, learn about variable scope. A variable exists only in a defined scope (a variable declared in a function, exists only in that function). You seem to be declaring variables in the Global scope (outside of functions) just so you have access to them throughout your application. It's a sure-fire way of losing track, and introducing security problems later on. If you need access to certain information inside a function, pass it in as an argument.
powerztomAuthor Commented:

Thanks for your input and suggestions. I keep saying that I'm a Sloppy VB programmer I learned alot of lazy habits and all the function and statement closings with brackets is tough for me getting used to cause in VB you never had to close any thing. So it's been a tough switch. But I am grateful to you and guys like you how take the time and explain and help out. As you can see I am involved with creating Gamecasts for Big 4 Sports and College.
I had alot of help from a EE Guy Robert S he helped me out alot. And I'm just saying that I am grateful some stuff I pickup quicker then others but I keep plugging away and looking at the code you and your co EE Guys wrote.
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

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now