Solved

Records adding to table becoming duplicates

Posted on 2013-11-27
5
333 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
Comment Utility
function myTimer()
{

clearData();
loadData();

}
</scrip
0
 

Author Comment

by:powerztom
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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

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.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

728 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

8 Experts available now in Live!

Get 1:1 Help Now