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

Posted on 2013-11-12
Last Modified: 2013-11-14
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
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
  • 3
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39642650
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?

Author Comment

ID: 39642777
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
LVL 43

Accepted Solution

Chris Stanyon earned 500 total points
ID: 39647684
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="//"></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');'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 = ('playSeq')) ?'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) ? '' + teamID + '.png': '',
				'playerImg'	: (playerID) ? '' + playerID + '.jpg' : '',
				'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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.


Author Closing Comment

ID: 39648136
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.
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39648248
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.

Author Comment

ID: 39648640

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.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

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…
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.
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)
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…

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