Solved

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

Posted on 2013-11-04
20
188 Views
Last Modified: 2013-11-05
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
Comment
Question by:powerztom
  • 12
  • 8
20 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39622008
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
 

Author Comment

by:powerztom
ID: 39622097
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
 

Author Comment

by:powerztom
ID: 39622238
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39622363
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
 

Author Comment

by:powerztom
ID: 39622533
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39622588
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
 

Author Comment

by:powerztom
ID: 39622630
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
 

Author Comment

by:powerztom
ID: 39624536
Chris I accepted answer without running code cause nothing appears in the tables. Should I open a new ticket?
0
 

Author Comment

by:powerztom
ID: 39624548
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
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39624618
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:powerztom
ID: 39624747
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39624805
Works perfectly for me...
0
 

Author Comment

by:powerztom
ID: 39624900
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39624930
Sure - here you go..
q-28284883-screenshot.png
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39624941
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
 

Author Comment

by:powerztom
ID: 39625016
Chris thanks I didn't doubt you I just thought you clicked on the wrong link thanks for the proof
0
 

Author Comment

by:powerztom
ID: 39625028
Chris well your code for id and position worked for the one player that came up.Good Job.
0
 

Author Comment

by:powerztom
ID: 39625061
Just redid it and got it Thanks Chris Nice Work.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39625117
No worries :)
0
 

Author Closing Comment

by:powerztom
ID: 39625719
Chris is a knowledgeable guy who has done a great job helping me out lately
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

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…

706 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

17 Experts available now in Live!

Get 1:1 Help Now