Solved

Records adding to table becoming duplicates

Posted on 2013-11-27
5
349 Views
Last Modified: 2013-11-27
I have a table and it gets populated with data of NBA Players stats I use a timer to update the stats however what happens is when It updates it appends same information to information already there so I have two sets until the timer goes off giving me three I tried using this

function clearData() {
      document.getElementById("playLog").innerHTML = '';
}
But this wipes everything so I tried this with the timer However still the table disappeared for good. any suggestions

var myVar=setInterval(function(){myTimer()},8000);

function myTimer()
{
loadData();      
clearData();
loadData();

}
</script> I can attach html and xml file the xml file will be static so you won't know if values are getting updated but I guess you can clear table then have table come back that would be a sign of progress. Maybe if the Images were loaded during $(document).ready(function() {  Then a similar function was called during the timer update that only updated the statistic numbers that might be even better on browser or Mobile Browser. Thanks EE
Table1.html
18753.XML
0
Comment
Question by:powerztom
5 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 39680075
function myTimer()
{

clearData();
loadData();

}
</scrip
0
 

Author Comment

by:powerztom
ID: 39680083
That was one of the combinations I already tried. Try it with the attachments. Thanks awayway
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39680166
When you clear out the table completely, you also lose the header and template. So you should probably do something like:
$('#playLog tbody tr:not(:first-child)').remove();

Open in new window

However, as you mention it would be much better to only update the stats so you could use this function:
	function updateData() {
		var xmlPath = '.';//'/xml/nba/scores/real';
		var xmlGameID = '18753';//'18917';

		$.ajax({
			type: "GET",
			url: xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml"
		}).done(function(data){
			var gameData = $(data);
			
			startingPlayers = $('Player', gameData).filter(function() { return $(this).attr('Started') == '1'});
			
			$(startingPlayers).each(function(i, player) {

				var playerNamePos = $(this).attr('Firstname') + ' ' + $(this).attr('Lastname') + ' (' + $(this).attr('Position') + ')';

				var playerRow = $('#playLog tbody tr').filter(function() { return $('td:first-child', this).html().indexOf(playerNamePos) != -1 });

				if (playerRow.length == 1) {

					//update the data in the players table
					newRow = playerRow[0];
					//$('td:nth-child(1)', newRow).html( playerImg ).append( TeamImg ).append( playerName );
					$('td:nth-child(2)', newRow).html( $(this).attr('Points'));
					$('td:nth-child(3)', newRow).html( $(this).attr('Assists'));
					$('td:nth-child(4)', newRow).html( $(this).attr('ORebounds'));
					$('td:nth-child(5)', newRow).html( $(this).attr('DRebounds'));
					$('td:nth-child(6)', newRow).html( $(this).attr('Steals'));
					$('td:nth-child(7)', newRow).html( $(this).attr('BlockedShots'));
					$('td:nth-child(8)', newRow).html( $(this).attr('TresMade'));

				} else { // not found, add (this bit could be made into a function and called here and in loadData)

					newRow = $('#rowTemplate').clone().removeAttr('id');
					TeamImg = $('<img>').attr('src', 'http://images.sportsnetwork.com/aspdata/NBA/Images/miniNBALogos/' + $(this).attr('TeamID') + '.png');
					playerImg = $('<img>').attr('src', 'http://images.sportsnetwork.com/bask/nba/atthecourt/players/' + $(this).attr('ID') + '.jpg');
					playerName = $('<p>').html( playerNamePos);

					//add the data to the players table
					$('td:nth-child(1)', newRow).html( playerImg ).append( TeamImg ).append( playerName );
					$('td:nth-child(2)', newRow).html( $(this).attr('Points'));
					$('td:nth-child(3)', newRow).html( $(this).attr('Assists'));
					$('td:nth-child(4)', newRow).html( $(this).attr('ORebounds'));
					$('td:nth-child(5)', newRow).html( $(this).attr('DRebounds'));
					$('td:nth-child(6)', newRow).html( $(this).attr('Steals'));
					$('td:nth-child(7)', newRow).html( $(this).attr('BlockedShots'));
					$('td:nth-child(8)', newRow).html( $(this).attr('TresMade'));

					//attach data attributes to the row if you need them later (in the dialog box for example);

					$('#players tbody').append(newRow);
				}
			});
		});
	}

Open in new window

So with this you don't need clearData() anymore and it actually also still creates new rows when necessary but for efficiency the first call (in document.ready) should still be to loadData().

EDIT: so to be clear, the timer function would only call updateData() now.

Note that if you keep both functions, the variables xmlPath and xmlGameID should not be set twice as that will lead to errors later on. It would not be that bad to define these 2 globally.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39680420
All a bit long winded really. Add this at the start of the ajax done() function

$('#players tbody tr').not('#rowTemplate').remove();

Open in new window

And add this at the end:

setTimeout(loadData,8000);

Open in new window

Remove the setTimer script and you're good to go.
0
 

Author Closing Comment

by:powerztom
ID: 39681351
Robby back! Very helpful and Project is coming along Thanks to Robby Chris and other EE Guys This site I know I abuse it  Is a lifesaver. These experts are insanely smart and it great to learn off them and I don't always get the 1st time or even the second but this site stores everything for reference and I'm really happy with the site and Experts I met.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

786 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