Solved

Xml data fills a table that has ability with Dialog popup

Posted on 2013-11-15
3
451 Views
Last Modified: 2013-11-18
I'd like to pull lineup of 10 players with 7 columns containing xml game data. I want to create the Headshot,First and Lastname with position then 6 more rows. I 'd like the functionality to click on a row and have a dialog popup with all that players data contained in xml data based on referencing player id. I started coding but got stuck with no errors in firefox. I like a pro to teach me how with dialog popup ability. Hopefully it's a Juery UI like Tooltip. Here is what I got so far

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.topheader {
	color: #FFF;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		
		

		<script type="text/javascript">
var xmlPath = '.'  //'/xml/nba/scores/real';
			var xmlGameID = '18753';
			

function loadData() {
 $.ajax({
                    type: "GET",
                    url: xmlPath + "/" + xmlGameID + ".xml",
                    dataType: "xml",
                    success: function (data) {
                        var d = $(data);
						 var Play = d.find('Play');
						  var gameData = $(gameData);
			
				$('Team', gameData).each(function(i, team) {
					//get to the Stats
					indStats = $('Individual_Statistics', gameData).filter(function() { return $(this).attr('IS_TeamID') == $(team).attr('ID') });
					startingPlayers = $('Player', indStats).filter(function() { return $(this).attr('SortOrder') == '1' });
					teamDiv = $('#' + $(team).attr('vh'));
                        
                        //convert the XML into a jQuery object
gameData = $(data);

//Get the Players node
players = gameData.find('Players');

//Now loop through each Player in the Players node
$('Player', players).each(function(i, player) {
	//Output some of the attributes for this player
	
               // if (player.size() > 0) {
                                
                             //$.each(players,function(i,player) {
          player=$(player);
        var tid = player.attr('TeamID');
         var pid =  player.attr('ID');  
		 var pts =  player.attr('Points')
		 var assists = player.attr('Assists')
		  $('#txtpoints').html(pts);
          //  $("#players").append(li);
			$('txtassists').html(assists);
             
			$('#imgplayer').attr("src","http://images.sportsnetwork.com/bask/nba/atthecourt/players/" + pid + ".jpg");
           var txt = player.attr("Firstname") + " " +
                player.attr("Lastname") + ", " +
                player.attr("Position");
           // getStats(player,txt,img,li);
           $('#txt1').html(txt);
							// }
       });

                    });
                    }
                });	
				// });	
}
</script>
</head>

<body>
<table width="750" border="0">
  <tr bgcolor="#0099CC" class="topheader">
    <td width="161"><div align="center"><strong>PlayerName</strong></div></td>
    <td width="63"><div align="center"><strong>Points</strong></div></td>
    <td width="67"><div align="center"><strong>Assists</strong></div></td>
    <td width="82"><div align="center"><strong>ORebounds</strong></div></td>
    <td width="90"><div align="center"><strong>DRebounds</strong></div></td>
    <td width="85"><div align="center"><strong>Steals</strong></div></td>
    <td width="85"><div align="center"><strong>Blocks</strong></div></td>
    <td width="85"><div align="center"><strong>TresMade</strong></div></td>
  </tr>
  <tr>
    <td><div align="center">
      <p align="left"><img src="Images/misc/invisibleplayer.png" name="imgplayer" width="50" height="50" id="txt1"></p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p id="txtpoints">&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p id="txtassists">&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
    <td><div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
  </tr>
  <tr bgcolor="#E8E8E8">
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr bgcolor="#E2E2E2">
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr bgcolor="#E6E6E6">
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr bgcolor="#E2E2E2">
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
  <tr bgcolor="#E4E4E4">
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
    <td><div align="center"></div></td>
  </tr>
</table>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();
//checkStatus();
}
</script>
</body>
</html>

Open in new window

Table.html
18753.XML
0
Comment
Question by:powerztom
  • 2
3 Comments
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39656135
The main reason your code failed is because your success() function is receiving the XML file back in a variable called 'data', but you are trying to use a variable called gameData.

This:
   var gameData = $(gameData);

Should be:
   var gameData = $(data);

After that, the rest of your code is fired inside the each loop for the Teams, but because your gameData didn't exist, the loop never gets fired.

Have a look through this. The reading of the XML file is straight forward stuff - you've been through this several times now. The dialog box is created using jQueryUI, and I've commented that so it should be easy enough to figure out.

You haven't said what data you want in the dialog box, so you'll have to tweak that. Basically the dialog is just a normal DIV and can contain any normal HTML elements. In the code you'll see that I added data attributes to each player row (name and number). This means that you can store all the data when you first read the XML file, and don't need to go back to it for the dialog content.

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Q_28295557 // Chris Stanyon</title>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

	<script type="text/javascript">
	$(document).ready(function() {
		//load in the XML file
		loadData();
		
		//set up the dialog box
		var playerDialog = $('#playerDialog').dialog({
			autoOpen	: false,
			modal		: true,
			buttons		: [{ text: 'OK', click: function() { $(this).dialog('close') }}]
		});
		
		//open the dialog when a players table row is clicked on
		$('#players').on('click', 'tbody tr', function() {
			//set up the dialog title
			playerDialog.dialog('option', 'title', $(this).data('name'));
			
			//set up the dialog content (grab additional information from the data attributes of the row)
			$('#playerDialog').html(
				$(this).data('name') + ' is player number ' + $(this).data('number')
			);
			
			//open the dialog
			playerDialog.dialog('open');
		});
			
	});



	function loadData() {
		var xmlPath = '.';
		var xmlGameID = '18753';

		$.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) {
				
				newRow = $('#rowTemplate').clone().removeAttr('id');
				
				playerImg = $('<img>').attr('src', 'http://images.sportsnetwork.com/bask/nba/atthecourt/players/' + $(this).attr('ID') + '.jpg');
				playerName = $('<p>').html( $(this).attr('Firstname') + ' ' + $(this).attr('Lastname') + ' (' + $(this).attr('Position') + ')');

				//add the data to the players table
				$('td:nth-child(1)', newRow).html( playerImg ).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);
				newRow.data('name', $(this).attr('Firstname') + ' ' + $(this).attr('Lastname'));
				newRow.data('number', $(this).attr('Number'));
				
				$('#players tbody').append(newRow);
			});
		});
	}
</script>

<style type="text/css">
	#players { border: none; }
	#rowTemplate { display:none; }
	#players thead tr { background-color: #0099CC; color: #ffffff; }
	#players tbody td { text-align:center; }
	#players tbody tr { cursor: pointer; }
	#players colgroup col:nth-child(1) { width: 155px; }
	#players colgroup col { width: 85px; }
	#myDialog { display:none; }
</style>
</head>

<body>

<table id="players">
	<colgroup><col><col><col><col><col><col><col><col></colgroup>
	<thead>
	<tr>
		<th>PlayerName</th>
		<th>Points</th>
		<th>Assists</th>
		<th>ORebounds</th>
		<th>DRebounds</th>
		<th>Steals</th>
		<th>Blocks</th>
		<th>TresMade</th>
	</tr>
	</thead>
	<tbody>
	<tr id="rowTemplate">
		<td class="playerName"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	</tbody>
</table>

<div id="playerDialog">
	This is the dialog box
</div>

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39656941
very nice chris I have two follow up questions for this so I'm just going to give you credit for this and  then post a ticket for these two questions. Good job on this.
0
 

Author Comment

by:powerztom
ID: 39657014
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

760 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

23 Experts available now in Live!

Get 1:1 Help Now