Solved

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

Posted on 2013-11-07
15
331 Views
Last Modified: 2013-11-12
I have table of growing Football plays there is a category called PLAYTYPE it can be INTERCEPTION, SACK, OR COMPLETE TD anyway I would like to filter just the value selected in the table. In a dropdown box with a button select a value like Interception and just return Interceptions that occured during the game it's the same as COMPLETE TD.
 THE ONLY THING IS I DONOT NEED CURRENT PLAY JUST GAMELOG. THE CURRENT PLAY PART WILL BE ABOVE SEVERAL COMPONENTS. SO for the data for Game log suck it all out into scrollable table. That's EE

HERE IS SOME SOURCE CODE THIS CODE HAS IT BUT DON'T USE CURRENT DRIVE
<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="utf-8" />
		<title>The Sports Network</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		var xmlPath,xmlGameID,gameFile,game,plays,currentPlay,badgeImgSrc,badge,lastPlay,currentPlay,previousPlays;
		$(document).ready(function() {
			//The DOMs ready so lets get started
			getData();
		});
		
		
		function getData() {
			//grab the XML file with an AJAX request. Once we've got it, call the processGame function
			xmlPath = '.';
			xmlGameID = '4295';
			gameFile = xmlPath + "/" + xmlGameID + '_' + "DRIVE.xml",

			$.ajaxSetup({ cache: false });
			$.ajax({
				url: gameFile,
				dataType: "xml"
			})
			.done(processGame)
			.fail(errorHandler)
			.always();
		}
		
		
		function processGame(gameData) {
			//convert the XML into a jQuery object
			game = $(gameData);
			
			//get the plays
			plays = game.find('Play');
			
			//get the current play
			currentPlay = plays.last();
			
			//set a timer to run the script again in 2 seconds
			setTimeout(getData,2000);
		
			//see if we have a new play. If not then quit
			if (currentPlay.attr('Seq') == $('#currentPlay').data('currentseq')) {
				console.log("No new plays");
				return;
			}
			
			//lets update the current play table
			//record the Seq as a data attribute on the currentPlay table.
			$('#currentPlay').data('currentseq', currentPlay.attr('Seq'));
			
			//add the badge image to the table
			badgeImgSrc = 'http://powerzsoftware.com/tsn/nfl/PS/' + currentPlay.attr('PossID') + '.png'
			badge = $('<img>').attr('src', badgeImgSrc);
			$('#currentPlay tbody tr.details td.Badge').html(badge);
			
			//loop through each column and grab the relevant attr from the current play
			$('#currentPlay tbody tr.details td:not(.Badge)').each(function(i,td) {
				$(this).html( currentPlay.attr( $(this).attr('class') ) );
			});
			
			//grab the narrative text for the current play.
			$('#currentPlay tbody tr.message td').html(currentPlay.find('narrative').attr('text'));
			
		
		
			//now focus on the older plays
			console.log("Fetching older plays");
			
			//get the Seq of the last play added to the playlog. If there isn't one, set the Seq to 0
			lastPlay = ($('#playLogHeader').data('lastseq')) ? $('#playLogHeader').data('lastseq') : 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 = plays.filter(function() {
				return (parseInt($(this).attr('Seq')) > parseInt(lastPlay) && parseInt($(this).attr('Seq')) < parseInt(currentPlay))
			});
		
			//loop through each of the older plays
			previousPlays.each(function(i,play) {
				//duplicate the HTML from the playLogTemplate.
				playLogEntry = $('#playLogTemplate').clone().removeAttr('id');
				
				//Update the badge
				badgeImgSrc = 'http://powerzsoftware.com/tsn/nfl/PS/' + $(this).attr('PossID') + '.png'
				badge = $('<img>').attr('src', badgeImgSrc);
				$('td.Badge', playLogEntry).html(badge);
			
				//Update the play information
				$('tr.details td:not(.Badge)', playLogEntry).each(function(i,td) {
					$(this).html( $(play).attr( $(this).attr('class') ) );
				});
			
				//Update the narrative text
				$('.message td', playLogEntry).html( $(this).find('narrative').attr('text') );
				
				//add it to the playLog table
				$('#playLogScroll').prepend(playLogEntry);
			});
			
			//set a data-attribute on the playLog table telling us the Seq of the last play added.
			$('#playLogHeader').data('lastseq', previousPlays.last().attr('Seq'));
		}
		
		
		function errorHandler(jqXHR, textStatus, errorThrown) {
			//Houston, we have a problem!
			console.log("Error: " + errorThrown);
		}
		</script>

		<style type="text/css">
			body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
			.playTable  { border: medium solid #006633; text-align: center; vertical-align: middle; }
			.playTable tbody td { background-color: #FFFF99; text-align:center; }
			.playTable tfoot td { background-color: #D6D680; text-align:center; }
			.playTable .title { background-color: #006633; font-size: 25px; }
			.playTable .headers{ background-color: #E5E5E5; } 
			.playTable col { width: 120px; } 
			.playTable .Badge img { width: 60px; height: 45px; }
			.playTable tbody .message td { height: 55px; background-color: #FFFF66; }
			
			#playLogScroll { height: 360px; overflow-y: scroll; width: 1010px; }
			#playLogTemplate { display: none; }
		</style>
	</head>

	<body>
		
		<table id="currentPlay" class="playTable">
			<colgroup><col><col><col><col><col><col><col><col></colgroup>
			<thead>
				<tr class="title"><th colspan="8">Current Play</th></tr>
				<tr class="headers"><th>Team</th><th>Quarter</th><th>TimeLeft</th><th>Playtype</th><th>Yards Gained</th><th>Ball on the</th><th>Down</th><th>Yards to go</th></tr>
			</thead>
			<tbody>
				<tr class="details">
					<td class="Badge"></td>
					<td class="Quarter"></td>
					<td class="TimeLeft"></td>
					<td class="PlayType"></td>
					<td class="TotalYards"></td>
					<td class="FinalYard"></td>
					<td class="ResultingDown"></td>
					<td class="ResultingToGo"></td>
				</tr>
				<tr class="message"><td colspan="8"></td></tr>
			</tbody>
	</table>
		
		<table id="playLogHeader" class="playTable">
			<colgroup><col><col><col><col><col><col><col><col></colgroup>
			<thead>
				<tr class="title"><th colspan="8">Game Log</th></tr>
				<tr class="headers"><th>Team</th><th>Quarter</th><th>TimeLeft</th><th>Playtype</th><th>Yards Gained</th><th>Ball on the</th><th>Down</th><th>Yards to go</th></tr>
			</thead>
		</table>
		
		<div id="playLogScroll">
			<table id="playLogTemplate" class="playTable">
				<colgroup><col><col><col><col><col><col><col><col></colgroup>
				<tbody>
				<tr class="details">
					<td class="Badge"></td>
					<td class="Quarter"></td>
					<td class="TimeLeft"></td>
					<td class="PlayType"></td>
					<td class="TotalYards"></td>
					<td class="FinalYard"></td>
					<td class="ResultingDown"></td>
					<td class="ResultingToGo"></td>
				</tr>
				<tr class="message"><td colspan="8"></td></tr>
				</tbody>
			</table>
			
		</div>

</body>
</html>

Open in new window

tHANKS ee
NFLGAMEPLAY.zip
0
Comment
Question by:powerztom
  • 8
  • 7
15 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39631136
hey powerztom
You say PLAYTYPE can be Interception, Sack or Complete TD, but in the XML file there are a lot more than just those 3. Do you only want to be filtering on those 3 or any of them.
0
 

Author Comment

by:powerztom
ID: 39631243
Most of them but if you get some of the basic ones down I can take over and then That would be great Big Time so dropdown with those 3 values to start and make a all that can retrieve all available records
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39631255
It's actually easier to put them all in as the plays are being loaded. You can then just read the playtype from the play and add it to the dropdown.

I'll post some code shortly :)
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39631391
Right - here you go:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Q_28288228 // 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
			getData();
			
			$('#applyFilter').click(applyFilter);
		});
		
		
		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
			$('.playTable.hidden', '#playLogScroll').removeClass('hidden');
			
			//if Show All isn't selected, we need to hide some rows
			if ($('#playType').val() != "Show All") {
				playsToHide = $('.playTable', '#playLogScroll').filter(function() {
					return $(this).data('PlayType') != $('#playType').val();
				}).addClass('hidden');
			}
		}
		
		
		function getData() {
			//grab the XML file with an AJAX request. Once we've got it, call the processGame function
			xmlPath = '.';
			xmlGameID = '4295';
			gameFile = xmlPath + "/" + xmlGameID + '_' + "DRIVE.xml",

			$.ajaxSetup({ cache: false });
			$.ajax({
				url: gameFile,
				dataType: "xml"
			})
			.done(processGame)
			.fail(errorHandler)
			.always();
		}
		
		
		function processGame(gameData) {
			//convert the XML into a jQuery object
			game = $(gameData);
			
			//get the plays
			plays = game.find('Play');
			
			//get the current play
			currentPlay = plays.last();
			
			//set a timer to run the script again in 2 seconds
			setTimeout(getData,2000);
		
			//see if we have a new play. If not then quit
			if (currentPlay.attr('Seq') == $('#currentPlay').data('currentseq')) {
				console.log("No new plays");
				return;
			}
			
			//lets update the current play table
			//record the Seq as a data attribute on the currentPlay table.
			$('#currentPlay').data('currentseq', currentPlay.attr('Seq'));
			
			//add the badge image to the table
			badgeImgSrc = 'http://powerzsoftware.com/tsn/nfl/PS/' + currentPlay.attr('PossID') + '.png'
			badge = $('<img>').attr('src', badgeImgSrc);
			$('#currentPlay tbody tr.details td.Badge').html(badge);
			
			//loop through each column and grab the relevant attr from the current play
			$('#currentPlay tbody tr.details td:not(.Badge)').each(function(i,td) {
				$(this).html( currentPlay.attr( $(this).attr('class') ) );
			});
			
			//grab the narrative text for the current play.
			$('#currentPlay tbody tr.message td').html(currentPlay.find('narrative').attr('text'));
			
		
		
			//now focus on the older plays
			console.log("Fetching older plays");
			
			//get the Seq of the last play added to the playlog. If there isn't one, set the Seq to 0
			lastPlay = ($('#playLogHeader').data('lastseq')) ? $('#playLogHeader').data('lastseq') : 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 = plays.filter(function() {
				return (parseInt($(this).attr('Seq')) > parseInt(lastPlay) && parseInt($(this).attr('Seq')) < parseInt(currentPlay))
			});
		
			//loop through each of the older plays
			previousPlays.each(function(i,play) {
				//duplicate the HTML from the playLogTemplate.
				playLogEntry = $('#playLogTemplate').clone().removeAttr('id').removeClass('hidden');
				
				//Update the badge
				badgeImgSrc = 'http://powerzsoftware.com/tsn/nfl/PS/' + $(this).attr('PossID') + '.png'
				badge = $('<img>').attr('src', badgeImgSrc);
				$('td.Badge', playLogEntry).html(badge);
			
				//Update the play information
				$('tr.details td:not(.Badge)', playLogEntry).each(function(i,td) {
					$(this).html( $(play).attr( $(this).attr('class') ) );
				});
			
				//Update the narrative text
				$('.message td', playLogEntry).html( $(this).find('narrative').attr('text') );
				
				//add the PLAYTYPE to the row
				playLogEntry.data('PlayType', $(this).attr('PlayType'));
				
				//add the PlayTypes to the DropDown
				if (!$("#playType option[value='" + $(this).attr('PlayType') + "']").length) {
					$('#playType').append($('<option>').text($(this).attr('PlayType')).val($(this).attr('PlayType')));	
				};
				
				//do we need to hide the play based on the filter?
				appliedFilter = $('#applyFilter').data('appliedFilter');
				if (appliedFilter && appliedFilter != "Show All" && $(this).attr('PlayType') != appliedFilter) {
					playLogEntry.addClass('hidden');
				}
				
				//add it to the playLog table
				$('#playLogScroll').prepend(playLogEntry);
			});
			
			//set a data-attribute on the playLog table telling us the Seq of the last play added.
			$('#playLogHeader').data('lastseq', previousPlays.last().attr('Seq'));
		}
		
		
		function errorHandler(jqXHR, textStatus, errorThrown) {
			//Houston, we have a problem!
			console.log("Error: " + errorThrown);
		}
		</script>

		<style type="text/css">
			body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
			.playTable  { border: medium solid #006633; text-align: center; vertical-align: middle; }
			.playTable tbody td { background-color: #FFFF99; text-align:center; }
			.playTable tfoot td { background-color: #D6D680; text-align:center; }
			.playTable .title { background-color: #006633; font-size: 25px; }
			.playTable .headers{ background-color: #E5E5E5; } 
			.playTable col { width: 120px; } 
			.playTable .Badge img { width: 60px; height: 45px; }
			.playTable tbody .message td { height: 55px; background-color: #FFFF66; }
			.playTable.hidden { display:none; }
			
			#filters { border: 1px solid #aa0000; padding: 10px; width:962px }
			
			#playLogScroll { height: 360px; overflow-y: scroll; width: 1010px; }
			#playLogTemplate { display: none; }
		</style>
	</head>

	<body>
		
		<table id="currentPlay" class="playTable">
			<colgroup><col><col><col><col><col><col><col><col></colgroup>
			<thead>
				<tr class="title"><th colspan="8">Current Play</th></tr>
				<tr class="headers"><th>Team</th><th>Quarter</th><th>TimeLeft</th><th>Playtype</th><th>Yards Gained</th><th>Ball on the</th><th>Down</th><th>Yards to go</th></tr>
			</thead>
			<tbody>
				<tr class="details">
					<td class="Badge"></td>
					<td class="Quarter"></td>
					<td class="TimeLeft"></td>
					<td class="PlayType"></td>
					<td class="TotalYards"></td>
					<td class="FinalYard"></td>
					<td class="ResultingDown"></td>
					<td class="ResultingToGo"></td>
				</tr>
				<tr class="message"><td colspan="8"></td></tr>
			</tbody>
		</table>
		<div id="filters">
			<h2>Filters</h2>
				<select id="playType">
					<option value="Show All">Show All</option>
				</select>
				<button id="applyFilter">Filter</button>
		</div>
		<table id="playLogHeader" class="playTable">
			<colgroup><col><col><col><col><col><col><col><col></colgroup>
			<thead>
				<tr class="title"><th colspan="8">Game Log</th></tr>
				<tr class="headers"><th>Team</th><th>Quarter</th><th>TimeLeft</th><th>Playtype</th><th>Yards Gained</th><th>Ball on the</th><th>Down</th><th>Yards to go</th></tr>
			</thead>
		</table>
		
		<div id="playLogScroll">
			<table id="playLogTemplate" class="playTable">
				<colgroup><col><col><col><col><col><col><col><col></colgroup>
				<tbody>
				<tr class="details">
					<td class="Badge"></td>
					<td class="Quarter"></td>
					<td class="TimeLeft"></td>
					<td class="PlayType"></td>
					<td class="TotalYards"></td>
					<td class="FinalYard"></td>
					<td class="ResultingDown"></td>
					<td class="ResultingToGo"></td>
				</tr>
				<tr class="message"><td colspan="8"></td></tr>
				</tbody>
			</table>
		</div>

	</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39631422
OK. To explain.

In the HTML, I've added a dropdown and a button. In document ready, the button fires the applyFilter function.

For this to work, look at lines 121-134 from the above code. It adds a data attribute called PlayType to each Play table added to the game log. It then adds the various PlayTypes to the dropdown and then before adding any new plays, it checks whether a filter is already in place, and if it is, it hides the plays that don't match the filter. Plays are hidden by adding a 'hidden' class to the table, so make sure you look at the CSS in the code above.

I think the only other line I changed was line 106, to remove the hidden class on newly created Plays.

That's about it really!
0
 

Author Comment

by:powerztom
ID: 39631467
Chris I can't get this to work here is code. What did I miss?

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Q_28288228 // Chris Stanyon</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript">
		var xmlPath,xmlGameID,gameFile,game,plays,currentPlay,badgeImgSrc,badge,lastPlay,currentPlay,previousPlays,playLogEntry,playsToHide;
		$(document).ready(function() {
			//The DOMs ready so lets get started
			getData();
			
			$('#applyFilter').click(applyFilter);
		});
		
		
		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
			$('.playTable.hidden', '#playLogScroll').removeClass('hidden');
			
			//if Show All isn't selected, we need to hide some rows
			if ($('#playType').val() != "Show All") {
				playsToHide = $('.playTable', '#playLogScroll').filter(function() {
					return $(this).data('PlayType') != $('#playType').val();
				}).addClass('hidden');
			}
		}
		
		
		function getData() {
			//grab the XML file with an AJAX request. Once we've got it, call the processGame function
			xmlPath = '.';
			xmlGameID = '4295';
			gameFile = xmlPath + "/" + xmlGameID + '_' + "DRIVE.xml",

			$.ajaxSetup({ cache: false });
			$.ajax({
				url: gameFile,
				dataType: "xml"
			})
			.done(processGame)
			.fail(errorHandler)
			.always();
		}
		
		
		function processGame(gameData) {
			//convert the XML into a jQuery object
			game = $(gameData);
			
			//get the plays
			plays = game.find('Play');
			
			//get the current play
			currentPlay = plays.last();
			
			//set a timer to run the script again in 2 seconds
			setTimeout(getData,2000);
		
			//see if we have a new play. If not then quit
			if (currentPlay.attr('Seq') == $('#currentPlay').data('currentseq')) {
				console.log("No new plays");
				return;
			}
			
			//lets update the current play table
			//record the Seq as a data attribute on the currentPlay table.
			$('#currentPlay').data('currentseq', currentPlay.attr('Seq'));
			
			//add the badge image to the table
			badgeImgSrc = 'http://powerzsoftware.com/tsn/nfl/PS/' + currentPlay.attr('PossID') + '.png'
			badge = $('<img>').attr('src', badgeImgSrc);
			$('#currentPlay tbody tr.details td.Badge').html(badge);
			
			//loop through each column and grab the relevant attr from the current play
			$('#currentPlay tbody tr.details td:not(.Badge)').each(function(i,td) {
				$(this).html( currentPlay.attr( $(this).attr('class') ) );
			});
			
			//grab the narrative text for the current play.
			$('#currentPlay tbody tr.message td').html(currentPlay.find('narrative').attr('text'));
			
		
		
			//now focus on the older plays
			console.log("Fetching older plays");
			
			//get the Seq of the last play added to the playlog. If there isn't one, set the Seq to 0
			lastPlay = ($('#playLogHeader').data('lastseq')) ? $('#playLogHeader').data('lastseq') : 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 = plays.filter(function() {
				return (parseInt($(this).attr('Seq')) > parseInt(lastPlay) && parseInt($(this).attr('Seq')) < parseInt(currentPlay))
			});
		
			//loop through each of the older plays
			previousPlays.each(function(i,play) {
				//duplicate the HTML from the playLogTemplate.
				playLogEntry = $('#playLogTemplate').clone().removeAttr('id').removeClass('hidden');
				
				//Update the badge
				badgeImgSrc = 'http://powerzsoftware.com/tsn/nfl/PS/' + $(this).attr('PossID') + '.png'
				badge = $('<img>').attr('src', badgeImgSrc);
				$('td.Badge', playLogEntry).html(badge);
			
				//Update the play information
				$('tr.details td:not(.Badge)', playLogEntry).each(function(i,td) {
					$(this).html( $(play).attr( $(this).attr('class') ) );
				});
			
				//Update the narrative text
				$('.message td', playLogEntry).html( $(this).find('narrative').attr('text') );
				
				//add the PLAYTYPE to the row
				playLogEntry.data('PlayType', $(this).attr('PlayType'));
				
				//add the PlayTypes to the DropDown
				if (!$("#playType option[value='" + $(this).attr('PlayType') + "']").length) {
					$('#playType').append($('<option>').text($(this).attr('PlayType')).val($(this).attr('PlayType')));	
				};
				
				//do we need to hide the play based on the filter?
				appliedFilter = $('#applyFilter').data('appliedFilter');
				console.log(appliedFilter);
				if (appliedFilter && appliedFilter != "Show All" && $(this).attr('PlayType') != appliedFilter) {
					playLogEntry.addClass('hidden');
				}
				
				//add it to the playLog table
				$('#playLogScroll').prepend(playLogEntry);
			});
			
			//set a data-attribute on the playLog table telling us the Seq of the last play added.
			$('#playLogHeader').data('lastseq', previousPlays.last().attr('Seq'));
		}
		
		
		function errorHandler(jqXHR, textStatus, errorThrown) {
			//Houston, we have a problem!
			console.log("Error: " + errorThrown);
		}
		</script>

		<style type="text/css">
			body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
			.playTable  { border: medium solid #006633; text-align: center; vertical-align: middle; }
			.playTable tbody td { background-color: #FFFF99; text-align:center; }
			.playTable tfoot td { background-color: #D6D680; text-align:center; }
			.playTable .title { background-color: #006633; font-size: 25px; }
			.playTable .headers{ background-color: #E5E5E5; } 
			.playTable col { width: 120px; } 
			.playTable .Badge img { width: 60px; height: 45px; }
			.playTable tbody .message td { height: 55px; background-color: #FFFF66; }
			.playTable.hidden { display:none; }
			
			#filters { border: 1px solid #aa0000; padding: 10px; width:962px }
			
			#playLogScroll { height: 360px; overflow-y: scroll; width: 1010px; }
			#playLogTemplate { display: none; }
			
			
		</style>
	</head>

	<body>
		
		<table id="currentPlay" class="playTable">
			<colgroup><col><col><col><col><col><col><col><col></colgroup>
			<thead>
				<tr class="title"><th colspan="8">Current Play</th></tr>
				<tr class="headers"><th>Team</th><th>Quarter</th><th>TimeLeft</th><th>Playtype</th><th>Yards Gained</th><th>Ball on the</th><th>Down</th><th>Yards to go</th></tr>
			</thead>
			<tbody>
				<tr class="details">
					<td class="Badge"></td>
					<td class="Quarter"></td>
					<td class="TimeLeft"></td>
					<td class="PlayType"></td>
					<td class="TotalYards"></td>
					<td class="FinalYard"></td>
					<td class="ResultingDown"></td>
					<td class="ResultingToGo"></td>
				</tr>
				<tr class="message"><td colspan="8"></td></tr>
			</tbody>
		</table>
		<div id="filters">
			<h2>Filters</h2>
				<select id="playType">
					<option value="Show All">Show All</option>
				</select>
				<button id="applyFilter">Filter</button>
		</div>
		<table id="playLogHeader" class="playTable">
			<colgroup><col><col><col><col><col><col><col><col></colgroup>
			<thead>
				<tr class="title"><th colspan="8">Game Log</th></tr>
				<tr class="headers"><th>Team</th><th>Quarter</th><th>TimeLeft</th><th>Playtype</th><th>Yards Gained</th><th>Ball on the</th><th>Down</th><th>Yards to go</th></tr>
			</thead>
		</table>
		
		<div id="playLogScroll">
			<table id="playLogTemplate" class="playTable">
				<colgroup><col><col><col><col><col><col><col><col></colgroup>
				<tbody>
				<tr class="details">
					<td class="Badge"></td>
					<td class="Quarter"></td>
					<td class="TimeLeft"></td>
					<td class="PlayType"></td>
					<td class="TotalYards"></td>
					<td class="FinalYard"></td>
					<td class="ResultingDown"></td>
					<td class="ResultingToGo"></td>
				</tr>
				<tr class="message"><td colspan="8"></td></tr>
				</tbody>
			</table>
		</div>

	</body>
</html>

Open in new window

 


i MANUALLY PUT IN VALUES BUT I DIDN'T GET ANYTHING.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39631520
Apart from declaring some variables at the start of your script (which you don't need) the code is identical to what I posted, and it works fine.

There's no sign of you manually adding anything!
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:powerztom
ID: 39631571
Chris do I need to do anything I can't get it to display anything I feel like a dummy.

Just email me your html or attach it and then I'll try.
Dude just attach html doc.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39631669
Don't worry - I'm sure it's something simple.

The HTML that I posted and the HTML you posted are exactly the same. Just create a page using that and run it.

What browser are you using. Do you know how to use the Console (IE and Chrome have it built in - press F12). Any errors should be reported there.
0
 

Author Closing Comment

by:powerztom
ID: 39631769
Excellent code this guy got talent Chris I was running it locally and not domain context I should thought of that one a long time ago but That what you did was more then I could have asked fored. Dude if only had your brain . Thanks again Chris.Your like my buddy rob on ee he like you a fucking genuis.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39631783
Cool. Pleased it's working.

When you have the time, have a really good read through it, so you fully understand what I've done and why I've done it. Hopefully it'll help you out in the future..
0
 

Author Comment

by:powerztom
ID: 39631833
dUDE i GOT QUESTIONS I promise I won't email you all the time but can I get your email and facebook. I make you famous with all the points you react up. I average programmer the only one at this Sports Network. So I'm just gonna learn with these crazy projects they give me you been a blessing these past couple days. Thanks Tom powerztom@verizon.net
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39632085
If it's all the same to you, I'd rather keep this on EE. As soon as it becomes personal, then it becomes business and that means paying for it and I'm not cheap ;)

I tend to be on here fairly often, so if I catch a question you've posted, I'll do my best to answer.

If you need a project working on in a professional capacity then that's another thing (not sure if touting for business is against EE policy!)

Hope that's OK
0
 

Author Comment

by:powerztom
ID: 39633404
No Problem Chris
0
 

Author Comment

by:powerztom
ID: 39641658
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

706 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now