Solved

Records adding to table becoming duplicates

Posted on 2013-11-27
5
363 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

685 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