• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 199
  • Last Modified:

I need to be able to click on a player and have that PlayerID AVAILABLE

I have a grid tab panel
GridTabbed Panel

 My Goal is to click on a player and a player box opens up. I put that Player ID in the section with last firstname and position cause that will get me access for player's info for so for now document.write to see it retrieved and written to screen. Or even if there was a way to mhave id there but  make it invisible. Cause now it's D1234 and D is Defensive man and the 1234 is Player ID.

Thanks EE
0
powerztom
Asked:
powerztom
  • 12
  • 8
1 Solution
 
Chris StanyonCommented:
Your best bet here would be to add data attributes to an element for the values you want. If you want to limit the clickable rows, add a class and bind to that.

Create your table rows like this:

<tr class="playerRow" data-playerid="1234" data-position="D">

Open in new window

and then bind the click event to the row using jQuery:

$('.playerRow').click(function() {
   console.log($(this).data('playerid'));
   console.log($(this).data('position'));
});

Open in new window

You can add as many attributes as you need:
0
 
powerztomAuthor Commented:
the thing is data-playerid="1234" data-position="D"> are just random numbers data-playerid would be want ever the mouse gets hovered over and data position will is already defined.

You help me out in the past using

 <tr class="playerRow" data-attribute ="id" data-position="position"/td>
                      <td width="79" class="GCLineup"><div>Forwards</div></td>
  <td width="21" class="GCLineup" data-attribute="Goals"><div>G</div></td>
  <td width="20" class="GCLineup" data-attribute="Assists"><div>A</div></td>
  <td width="34" class="GCLineup" data-attribute="Points"><div>Pts</div></td>
  <td width="30" class="GCLineup" data-attribute="PlusMinus"><div>PM</div></td>
  <td width="25" class="GCLineup" data-attribute="Penalties"><div>P</div></td>
  <td width="29" class="GCLineup" data-attribute="PIM"><div>PIM</div></td>
  <td width="51" class="GCLineup" data-attribute="Shots"><div>Shots</div></td>
  <td width="37" class="GCLineup" data-attribute="Hits"><div>Hits</div></td>
  
                    </tr>

Open in new window

that's how I added it now not sure if I inserted it correctly
0
 
powerztomAuthor Commented:
Chris I created text box at the bottom of one table that why you can click the player and have player's id show up in the textbox so me I tried but I didn't get it Look at zip folder. Had to do it cause ee changes xml filenames
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Chris StanyonCommented:
I only used those numbers as an example. I've just realised that your rows are built dynamically, so you'll have to add the data attributes dynamically too.

In your jQuery code, find the 2 lines that set the player and stats variables and add the data attribute bit after that, so you code would look like:

var player = $(activePlayers[i-1]);
var stats = $(player.find('Stats'));
						
//set the data attributes here by adding in these 3 lines
$(this).addClass('playerRow');
$(this).data('playerid', player.attr('ID'));
$(this).data('position', player.attr('Position'));

$(this).find('td').each(function(i2, td){

Open in new window

You will also need to bind the click event to the .playerRow TRs, so you need to add this to the start of your script (straight after the $("#myTabs").tabs(tabOpts); line):

$('#myTabs').on('click', '.playerRow', function() {
	console.log("PlayerID: " + $(this).data('playerid'));
	console.log("Position: " + $(this).data('position'));
});

Open in new window

Once you've done that, clicking on a row should write the player ID and Position to the console.
0
 
powerztomAuthor Commented:
Chris I just had a syntax error after I added the code. If there is one thing I struggle with it's closing brackets or braces. So If you can show me I give you the 500 points if not I'll give you 495.
0
 
Chris StanyonCommented:
You will always stand a better change of matching brackets if you indent your code properly. Any text editor will do it and the more advanced ones will even hi-light the matching brackets. The code you have on your page doesn't have any mismatches, but then you haven't added the code I posted. Here's the full script with my code injected:

<script>
(function($){
	var tabOpts = {
		fx: {
			opacity: "toggle",
			duration: "slow"
		}
	}

	$("#myTabs").tabs(tabOpts);
	
	$('#myTabs').on('click', '.playerRow', function() {
		console.log("PlayerID: " + $(this).data('playerid'));
		console.log("Position: " + $(this).data('position'));
	});
	
})(jQuery);


// fill tables – start of added code
var xmlPath = '.' //'/xml/nhl/scores/real';
var xmlGameID = "17928" //'38041';

$.ajaxSetup({ cache: false });

myVar = setInterval(function() {
	$.ajax({
		type: "GET",
		url: xmlPath +"/"+xmlGameID+".xml",
		dataType: "xml",
		success: function(data){
			var d = $(data);
			if (d.find('Play').attr("Status").toUpperCase() === "FINAL") {
				clearInterval(myVar);
			}
  
			var myLoopData = { 'A': { div: 'a' }, 'H': { div: 'b' } };
			var homeTeamID, awayTeamID;

			d.find('Team').each(function(i, teamNode){
				var t = $(teamNode);
				var vh = t.attr('vh');
				
				if (myLoopData[vh]) {
					myLoopData[vh].teamID = t.attr('ID');
					(vh == "A") ? awayTeamID = myLoopData[vh].teamID : homeTeamID = myLoopData[vh].teamID;
 					$('#myTabs>ul>li>a[href="#'+(myLoopData[vh].div)+'"]').html(t.attr('name'));
				}
			});

			for(var loopDataVar in myLoopData) { // away/home team
				var loopDataItem = myLoopData[loopDataVar];
				var activePlayers = $($($(d.find('Individual_Statistics')).filter(function(){return $(this).attr('IS_TeamID') == loopDataItem.teamID;})[0]).find('Player')).filter(function(){return $(this).attr('Position') != "G";});

				$('#'+(loopDataItem.div)+' table tr').each(function(i, stat){ // for as many rows as there are in the table
					var tr0;
					if (i == 0) { // first row: remember this to access later to get stat name
						tr0 = $(this);
					} else if (i <= activePlayers.length) { // other rows: fill with stats
						var player = $(activePlayers[i-1]);
						var stats = $(player.find('Stats'));
						
						//set the data attributes here by adding in these 3 lines
						$(this).addClass('playerRow');
						$(this).data('playerid', player.attr('ID'));
						$(this).data('position', player.attr('Position'));

						$(this).find('td').each(function(i2, td){
							var s = '?';
							if (i2 == 0) {
								s = player.attr('Firstname') + '&nbsp;' + player.attr('Lastname')+ ',&nbsp;' + player.attr('Position') +player.attr('ID') ;
							} else {
								var statName = $('td:nth-child('+(i2+1)+')', tr0).data('attribute');
								s = stats.attr(statName);
							}

							$(this).html(s);
						});
					}
				});
			}

		}
	});
}, 1000);
</script>

Open in new window

0
 
powerztomAuthor Commented:
Chris thanks for your help and your patience today. You helped me out. I struggle a little bit with closing braces and Brackets. But you provided A helpING HAND.Thanks
0
 
powerztomAuthor Commented:
Chris I accepted answer without running code cause nothing appears in the tables. Should I open a new ticket?
0
 
powerztomAuthor Commented:
this is your code

http://www.powerzsoftware.com/tsn/NHL/Forwards4.html

this is previous code

http://www.powerzsoftware.com/tsn/NHL/Forwards3.html


I only posted these two so you can compare code.
0
 
Chris StanyonCommented:
Right. The problem is that the code I added uses the on() method, which was introduced in jQuery 1.7 - you're using jQuery version 1.4.4 - update your jQuery to the lastest version and you should be good to go.

It's considered best-practice to get the jQuery from a CDN such as Google. It helps with caching (speeding up page loads).

Towards the bottom of your page, change the jQuey 1.4.4 script tag to this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Open in new window

It'll grab the latest version 1 library.

FYI - you also seem to be trying to load jquery.ui.core.js which is giving a 404 error!
0
 
powerztomAuthor Commented:
Chris,

I got half of one line in the first table and that's it. Tell me What I need to do.

http://www.powerzsoftware.com/tsn/NHL/Forwards5.html
0
 
Chris StanyonCommented:
Works perfectly for me...
0
 
powerztomAuthor Commented:
the link above only produces one line but on your browser that link is totally populated ? can you get me a screenshot of 2nd tab clicked just post the image. Thanks
0
 
Chris StanyonCommented:
Sure - here you go..
q-28284883-screenshot.png
0
 
Chris StanyonCommented:
It does seem to load half of the first line and then stall. It does carry on and complete after that, but there's certainly a glitch!
0
 
powerztomAuthor Commented:
Chris thanks I didn't doubt you I just thought you clicked on the wrong link thanks for the proof
0
 
powerztomAuthor Commented:
Chris well your code for id and position worked for the one player that came up.Good Job.
0
 
powerztomAuthor Commented:
Just redid it and got it Thanks Chris Nice Work.
0
 
Chris StanyonCommented:
No worries :)
0
 
powerztomAuthor Commented:
Chris is a knowledgeable guy who has done a great job helping me out lately
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 12
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now