Tom Powers
asked on
Filter and display a particular value and display it in the game log table.
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
NFLGAMEPLAY.zip
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>NFLGAMEPLAY.zip
ASKER
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
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 :)
I'll post some code shortly :)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!
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!
ASKER
Chris I can't get this to work here is code. What did I miss?
i MANUALLY PUT IN VALUES BUT I DIDN'T GET ANYTHING.
<!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>i MANUALLY PUT IN VALUES BUT I DIDN'T GET ANYTHING.
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!
There's no sign of you manually adding anything!
ASKER
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.
Just email me your html or attach it and then I'll try.
Dude just attach html doc.
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.
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.
ASKER
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.
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..
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..
ASKER
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
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
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
ASKER
No Problem Chris
ASKER
Chris another filter for html table PLAYTYPE but different
https://www.experts-exchange.com/questions/28291883/Filter-and-display-a-particular-value-and-display-it-in-the-game-log-table.html
https://www.experts-exchange.com/questions/28291883/Filter-and-display-a-particular-value-and-display-it-in-the-game-log-table.html
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.