?
Solved

Xml data fills a table that has ability with Dialog popup

Posted on 2013-11-15
3
Medium Priority
?
464 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 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

Featured Post

Industry Leaders: 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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
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)
Suggested Courses

719 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