Solved

Transfer xml data from one table to another table

Posted on 2013-11-05
15
284 Views
Last Modified: 2013-11-11
I have a NFL gamelog I need to code it for a live version but this will be simulated game,
I have one table for the current play then I have a table I use as the gamelog it gathers plays that occur after current play. With The game log I need scrollbars on the right the code and there is in the code. I need data to flow current table then gamelog table and gamelog stores it but doesn't suck up any duplicates.


http://www.powerzsoftware.com/tsn/Gameseq.html

Source Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.title {
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
    font-weight: bold;
}
.textborder {
	border: medium solid #063;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: center;
	vertical-align: middle;
}
.tablebord {
	border: medium solid #060;
}
</style>
<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 = '.' //'/xml/nfl/scores/real';
            var xmlGameID = '4295'; 
            var counterXml = 0;
            var counterSeq = 1; // 1 = start from the beginning (full match replay), use -1 to start at end (then it will also search for start of last drive automatically now)
            var counterInit = false;
            var xmlGameDrive = 4295;
			var msg;
			var PossID,PlaySeq,PossIDbak,Quarter,TimeLeft,ResultingToGo,ResultingDown,TotalYards,PlayType,ScoringPlay,FinalYard;
			function gettext() {
              
                $.ajax({
                    type: "GET",
                    url: xmlPath + "/" + xmlGameDrive + '_' + "DRIVE" + ".xml",
                    dataType: "xml",
                    success: function (data, textStatus, jqXHR) {

                        var d = $(data);
var Play = d.find('Play');
	   PossID = Play.attr('PossID');
                       
                        if (counterSeq == -1) { // init to last Seq in file
                            lastSeq = 1 * d.find('Play').last().attr('Seq');
                            if (lastSeq > counterSeq) {
                                counterSeq = lastSeq; // skip to end
                            }
                            counterInit = true;
                        }

                        msg = "";
                        
                        var PlaySeq = d.find('Play[Seq="' + counterSeq + '"]');
                        if (PlaySeq.length > 0) {
                            PossIDbak = PossID;
                            PossID = PlaySeq.attr('PossID');

                            // find start of current DRIVE based on PossID
                            if (counterInit) {
                                counterInit = false;
                                var playNodes = d.find('Play');
                                for (var intCounter = playNodes.length - 1; intCounter >= 0; intCounter--) {
                                    var tempSeq = $(playNodes[intCounter]).attr('Seq');
                                    if (tempSeq < counterSeq) {
                                        if ($(playNodes[intCounter]).attr('PossID') == PossID) {
                                            counterSeq = tempSeq;
                                        } else {
                                            break;
                                        }
                                    }
                                }
                            }

	   $('#imgcur').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/' + PossID + '.png');
                            msg = PlaySeq.find('narrative').attr('text');
                            $('#txtGametext').html(msg);
                           
                            Quarter = PlaySeq.attr('Quarter');
							$('#txtQ').html(Quarter);
                            TimeLeft = (PlaySeq.attr('TimeLeft'))
							$('#txttime').html(TimeLeft);
                            PlayType = (PlaySeq.attr('PlayType'));
							$('#txtplaytype').html(PlayType);
                            TotalYards = (PlaySeq.attr('TotalYards'));
							$('#txtYdsgain').html(TotalYards);
                            
                            FinalYard = (PlaySeq.attr('FinalYard'));
							$('#txtballon').html(FinalYard);
                            ResultingDown = (PlaySeq.attr('ResultingDown'));
							$('#txtdown').html(ResultingDown);
                           
                            ResultingToGo = (PlaySeq.attr('ResultingToGo'));
                            $('#txtyards').html(ResultingToGo);
                      $('#imgcur1').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/' + PossID + '.png');	       
               prevplays(d);

                           counterSeq++;
                        } else {
                            lastSeq = 1 * d.find('Play').last().attr('Seq');
                            if (lastSeq > counterSeq) {
                                counterSeq++; // skip missing Seq
                            }
                        }


                    },
                    error: function () {
                        //counterXml = -1;
                    }
                });
            }
			
			
			function prevplays(d) {
    d.find('Play').each(function(i, Play){
        var playNode = $(Play);
        var tr = $('<tr/>');
		var str = 	
	'<td></td><td>' + playNode.attr('Quarter') + '</td><td>'; + playNode.attr('TimeLeft') + '</td><td>'; + playNode.attr('PlayType') + '</td><td>'; + playNode.attr('TotalYards') + '</td><td>'; + playNode.attr('FinalYard') + '</td><td>' + playNode.attr('ResultingDown') + '</td><td>'; + playNode.attr('ResultingToGo') + '</td><br /><td>' + playNode.find('narrative').attr('text') +'</td>';
        tr.append(str);
        $('#scrolltable').append(tr);
    });
}
          
			</script>
</head>

<body>
<table width="750" height="113" border="0" class="textborder">
  <tr>
    <td colspan="8" bgcolor="#006633"><div align="center" class="title">Current Play</div></td>
  </tr>
  <tr>
    <td width="99" bgcolor="#E5E5E5"><div align="center"><strong>Team</strong></div></td>
    <td width="85" bgcolor="#E5E5E5"><div align="center"><strong>Quarter</strong></div></td>
    <td width="91" bgcolor="#E5E5E5"><div align="center"><strong>TimeLeft</strong></div></td>
    <td width="110" bgcolor="#E5E5E5"><div align="center"><strong>Playtype</strong></div></td>
    <td width="99" bgcolor="#E5E5E5"><div align="center"><strong>Yards Gained</strong></div></td>
    <td width="86" bgcolor="#E5E5E5"><div align="center"><strong>Ball on the</strong></div></td>
    <td width="57" bgcolor="#E5E5E5"><div align="center"><strong>Down</strong></div></td>
    <td width="89" bgcolor="#E5E5E5"><div align="center"><strong>Yards to go</strong></div></td>
  </tr>
  <tr>
    <td height="56" bgcolor="#FFFF99"><div align="center"><img src="http://powerzsoftware.com/tsn/nfl/PS/082.png" name="imgcur" width="60" height="45" id="imgcur"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txtQ"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txttime"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txtplaytype"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txtYdsgain"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txtballon"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txtdown"></div></td>
    <td bgcolor="#FFFF99"><div align="center" id="txtyards"></div></td>
  </tr>
</table>
<table width="750" height="55" border="0" class="textborder">
  <tr>
    <td bgcolor="#FFFF66"><p align="center" id="txtGametext">&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Football Field with drawn lines will go here!</p>
<table width="750" border="0">
  <tr>
    <td bgcolor="#006633"><div align="center" class="title"> Play by Play Game Log</div></td>
  </tr>
</table>
<table width="750" border="0">
  <tr bgcolor="#E6E6E6" class="textborder">
    <td width="104"><strong>Team</strong></td>
    <td width="82"><strong>Quarter</strong></td>
    <td width="89"><strong>TimeLeft</strong></td>
    <td width="108"><strong>Playtype</strong></td>
    <td width="96"><strong>Yards Gained</strong></td>
    <td width="83"><strong>Ball on the</strong></td>
    <td width="61"><strong>Down</strong></td>
    <td width="93"><strong>Yards to go</strong></td>
  </tr>
</table>
<div style='height: 400px; overflow-y: scroll;'>
<table width="750" border="0" class="tablebord" id="scrolltable">
  <tr bgcolor="#FFFF99">
    <td width="106"><div align="center">
      <p><img src="PS/081.png" name="imgcur1" width="85" height="65" id="imgcur1"></p>
    </div></td>
    <td width="78"><div align="center" id="txtQQ"></div></td>
    <td width="88"><div align="center" id="txttime1"></div></td>
    <td width="109"><div align="center" id="txtplaytype"></div></td>
    <td width="96"><div align="center" id="txttotalyds"></div></td>
    <td width="83"><div align="center" id="txtballon1"></div></td>
    <td width="59"><div align="center" id="txtdown1"></div></td>
    <td width="89"><div align="center" id="txtyards1"></div></td>
  </tr>
  <tr>
    <td colspan="8" bgcolor="#FFFF66"><div align="center">
      <p id="txtgameplay">&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
  </tr>
</table>
<table width="750" border="0">
  <tr>
    <td><div align="center">
      <input type="submit" name="btnScore" id="btnScore" value="Scoring Plays">
      <input type="submit" name="btnCompletes" id="btnCompletes" value="Completed Passes">
      <input type="submit" name="btnCompletes2" id="btnCompletes2" value="Sacks">
      <input type="submit" name="btnCompletes3" id="btnCompletes3" value="Interceptions">
    </div></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<script>
var myVar=setInterval(myTimer,1000);

function myTimer()
{
	gettext();
}
  </script>
</body>
</html>

Open in new window

Attached is zip folder with xml and html cause ee changes name of xml file
NFLGAMEPLAY.zip
0
Comment
Question by:powerztom
  • 7
  • 6
  • 2
15 Comments
 
LVL 7

Expert Comment

by:cstsang
ID: 39626771
What do you mean duplicate? whole table? or only the previous row?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39627234
@powerztom - can you explain in detail what you need. Treat me as if I know nothing about NFL (I don't!!).

It looks like every second you will read an XML file that contains a list of 'Plays'. I guess this list grows as the game go on, and each time you read the XML file, you want to add the new plays to your HTML.

I don't quite understand the bit about the current play and game log. If you read the XML and there's 4 new 'Plays', what would you do with them.

I need this in layman's terms - not football terms! Football to me is played with a round ball, over two 45minutes halves :)
0
 

Author Comment

by:powerztom
ID: 39627413
OK,

THERE IS ONE XML FILE HOWEVER that file gets updated each time one football play happens. In American Football one play occurs then stops then players lineup and another play happens. Well each play that xml file gets updated. the xml file that gets updated that information gets displayed in a current html table current is just a name I call it, and below is another table and that's where I'm having a issue that's where the previous plays get loaded into. That 2nd table will get large so I need scrollbars to stick directly to the table. and not inches away like I have it. In the xml file each play has a seq number when the game is over you have one xml file that has a seq number for everyplay in the game. About American football. One team gets the ball the ball is marked down at a spot on the field 10 yards down the field is another marker called first down marker . The team with the ball has 4 chances to get beyond 10 yards to get another set of 4 downs to reach past another 10 yards. You can pass and run to make it into the endzone where you score 6 points. That's a little bit about football the game and hopefully what I'm looking to down on this page. But this link the Play by Play Game Log is where I need previous plays to be dropped in. http://www.powerzsoftware.com/tsn/Gameseq.html

Look at zip file attached above and see html code and xml file structure.
0
 
LVL 7

Expert Comment

by:cstsang
ID: 39628012
According to 4295_DRIVE.xml it contains several "records" for each quarter.
The game log just display what data in  4295_DRIVE.xml,so it is duplicate.

Would you tell me what do you want to show in game log table?
0
 

Author Comment

by:powerztom
ID: 39628043
4295_DRIVE.xml shows seq drives for game stats 4295.xml is for the same game just player stats.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39629078
Hey powerztom,

Had some time and fancied the challenge so I've looked through your code and re-factored it. Couple of bits in your code that I didn't understand, so I've skipped them, but this code seems to do what you need.

The only thing I wasn't sure about was how you wanted the previous plays adding. For example, if when you load up the page, there are 10 plays already in the file, I've coded it so that the last play is added to the Current Play table and the other 9 are added to the Game Log table. It's also coded so that any new plays are added to the Game Log table in one go, so if there were 5 plays between your script running, it would add them all to the game log.

Have a play around with what I've posted (next comment) and see if it's close to what you need. I've commented the code so hopefully you'll follow what I've done.

Any questions, just ask.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39629079
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Q_28285894 // 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();
		});
		
		
		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

0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Closing Comment

by:powerztom
ID: 39630360
Good job Chris It worked I'm impressed Now I get to look at someone else's code (Being You) and learn different styles. That is what makes this site great. I learn off my buddy Robert S. Then you come along and accept a maybe difficult challenge and a working solution is created and this just helps me and it may be a pain in the ass but it helps you or challenges you.But you did a great job chris I'm extremely thankful.
0
 

Author Comment

by:powerztom
ID: 39630423
Chris the main reason why I wanted a gamelog table is to have buttons created or maybe a dropdown of playtypes and filter through them in the game log One example would be INTERCEPTION or COMPLETE TD or SACK Believe me to lazy couch potato football watching fat man that would be huge. I'm going to put in a ticket hopefully you are up for it cause you are familiar and did a great job on this one.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39630532
Glad I could help - enjoyed the challenge :)

If you add another related question, post a comment in here with a link to the new question and I'll be notified automatically. I can then take a look.
0
 

Author Comment

by:powerztom
ID: 39630990
Chris,

here you go and Don't worry about current log I'm gonna use that at the top of page the game log is going to be several components below current play. Read the description brother thanks again.http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28288228.html
0
 

Author Comment

by:powerztom
ID: 39634168
Chris thanks for your work I have a complex scenario. It's like what you did already let me explain In basketball there are similar values to make a game log the only thing is when they or people before me made the basketball app they just had values like gametext player pic playtype time but they never saved it to the next xml file The updated xml file has new values but there is no game seq number so can a virtual table be created and saved then we can do dropdown list. That list would be big cause the NBA ACTION MOVES QUICK. Thanks for setTimeout(getData,2000); I was getting javascript message box unresponsive script using SetInterval 1000 so I changed it to setTimeout(getData 2000) and the message has gone away. Let me know about virtual table and save data as xml for basketball. Thanks Chris
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39634471
Without some way of identifying the order of plays, such as a Seq number, it's probably going to be trickier. Not sure what you mean by a virtual table.
0
 

Author Comment

by:powerztom
ID: 39639852
Chris I put in a ticket similar to football this time it's hockey but I just need a dropdown to control the data that is in the table. You did such a kick ass job last time that I was hoping to get your help.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39640069
Can't see a new question - post a link to it here and I'll automatically get notified, and then I'll have a look.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

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.
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
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…

708 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

16 Experts available now in Live!

Get 1:1 Help Now