Records adding to table becoming duplicates

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
powerztomAsked:
Who is Participating?
 
Robert SchuttConnect With a Mentor Software EngineerCommented:
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
 
chaitu chaituCommented:
function myTimer()
{

clearData();
loadData();

}
</scrip
0
 
powerztomAuthor Commented:
That was one of the combinations I already tried. Try it with the attachments. Thanks awayway
0
 
Chris StanyonCommented:
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
 
powerztomAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.