Solved

Can't get xml into a html table

Posted on 2013-12-16
9
309 Views
Last Modified: 2014-01-13
I really need to get this Nhl xml into a table and have The tean Logo and pLAYRERS HEAD SHOT, I thought for sure that I had this one but I've been busy and now I need this done so EE if you can bail me out I just need Team Logo
http://images.sportsnetwork.com/hockey/nhl/logos

Player logo
http://images.sportsnetwork.com/nhl/attherink/players/ i wasn't sure I have two blank.png s for each

here is the code I made classes for everything except PLAYERID which is headshot and
TeamID which is team logo. I know this is similar to NFL qb BUT THIS ONE HAS A GOTTA YA IN IT.HERE IS MY CODE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="jquery1.scrollbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url: 'ADX-SCORING-LEADERS.xml',
		dataType: "xml"
	}).done(function(data) {
		$('Leaders', data).each(function(i, Leaders) {
			newGame = $('#players').clone().removeAttr('id');
			
			
			$('.Player_Name', newGame).html( $('Player_Name', Leaders).text() );
			$('.Team', newGame).html( $('Team', Leaders).text() );
			$('.Games_Played', newGame).html( $('Games_Played', Leaders).text() );
			$('.Goals', newGame).html( $('Goals', Leaders).text() );
			
			$('.Assists', newGame).html( $('Assists', Leaders).text() );
			$('.Total_Points', newGame).html( $('Total_Points', Leaders).text() );
			$('.Plus_Minus', newGame).html( $('Plus_Minus', Leaders).text() );
			$('.Penalty_Minutes', newGame).html( $('Penalty_Minutes', Leaders).text() );
			$('.Power_Play_Goals', newGame).html( $('Power_Play_Goals', Leaders).text() );

			$('.Short_Handed_Goals', newGame).html( $('Short_Handed_Goals', Leaders).text() );
			$('.Game_Winning_Goals', newGame).html( $('Game_Winning_Goals', Leaders).text() );
			
			var newLink = $('<a>')
    .attr('href', '#')
    .text( $('PlayerID', Leaders).text() )
   // .data('gameID', $('game_id', game).text() )
    .click( function(e) {
       e.preventDefault();
      window.location =
                        "Leading Scorers.html#" + $('players', Leaders).text();
    });

$('.gameStatus', newGame).html( newLink );
			$('players ul').append( $('<li>').append(newGame) );
			//$('body').append(newGame);
		});
		
		$('#players').scrollbox({
			linear: true,
  step: 1,
  delay: 0,
  speed: 100
});
});
});
$('#players').scrollbox({
  direction: 'h',
  distance: 140
});
$('#players-backward').click(function () {
  $('#players').trigger('backward');
});
$('#players-forward').click(function () {
  $('#players').trigger('forward');
});
</script>
<style type="text/css" media="screen">
    #QB {
	width: 225px;
	height: 400px;
	overflow: hidden;
}
#QB {
	width: 410px;
	height: 400px;
	overflow: hidden;
	#QB ul { list-style-type: none; }
}
#QB ul { list-style-type: none; }
#tablescroll ul { padding: 0px; list-style-type:none; }
#tablescroll { display:none; }	
	
	</style>
</head>

<body>
<div width="425" id="players">
  <ul>
  </ul>
</div>
<table width="425" border="0">
  <tr>
    <td width="86" height="105"><p><img src="http://dev.sportsnetwork.com/aspdata/nhl2/IMAGES/MISC/Blank.png" name="imgteam" width="70" height="80" id="imgteam"></p></td>
    <td width="71" class="postionn"><img src="http://dev.sportsnetwork.com/aspdata/nhl2/IMAGES/MISC/Blank.png" name="imgplayer" width="70" height="80" id="imgplayer"></td>
    <td width="254"><table width="100%" border="0">
      <tr>
        <td class="Player_Name" colspan="7"><div align="center">Player</div></td>
      </tr>
      <tr>
        <td class ="Team" colspan="7"><div align="center">Team</div></td>
      </tr>
      <tr>
        <td width="10%"><div align="center">GP</div></td>
        <td class= "Games_Played" width="14%"><div align="center"></div></td>
        <td width="15%"><div align="center">Goals</div></td>
        <td class ="Goals" width="13%"><div align="center"></div></td>
        <td colspan="2"><div align="center">Assists</div></td>
        <td class= "Assists" width="15%"><div align="center"></div></td>
      </tr>
      <tr>
        <td height="28" colspan="2"><div align="center">Points</div></td>
        <td class="Total_Points"><div align="center"></div></td>
        <td><div align="center">P/M</div></td>
        <td class="Plus_Minus" width="12%"><div align="center"></div></td>
        <td  width="21%"><div align="center">P Min</div></td>
        <td class="Penalty_Minutes"><div align="center"></div></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="425" border="0">
  <tr>
    <td width="69"><div align="center">PPG</div></td>
    <td class= "Power_Play_Goals" width="51"><div align="center"></div></td>
    <td width="80"><div align="center">SHG</div></td>
    <td class= "Short_Handed_Goals" width="47"><div align="center"></div></td>
    <td width="93"><div align="center">GWG</div></td>
    <td class = "Game_Winning_Goals" width="59"><div align="center"></div></td>
  </tr>
</table>
<p>&nbsp;</p>
<blockquote>&nbsp;</blockquote>
<p>&nbsp;</p>
</body>
</html>

Open in new window

Leading-Scorers.html
jquery1.scrollbox.js
ADX-SCORING-LEADERS.xml
0
Comment
Question by:powerztom
  • 6
  • 3
9 Comments
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39722832
Have a look at this Tom. I'll leave the styling up to you, and the path for the Team logo seems to be wrong (I don't know what it is)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q_28319592 // Chris Stanyon</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.scrollbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$.ajax({url: 'ADX-SCORING-LEADERS.xml'})
	.done(function(data) {
		$('Leaders', data).each(function(i, player) {
			var playerInfo = $(player);
			var newPlayer = $('#template').clone().removeAttr('id');
				
			var teamLogo = $('<img>').attr('src', 'http://images.sportsnetwork.com/hockey/nhl/logos/' + $('TeamID', playerInfo).text() + '.jpg');
			var playerImage = $('<img>').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/players/' + $('PlayerID', playerInfo).text() + '.jpg');
				
			$('.teamlogo', newPlayer).append( teamLogo );
			$('.headshot', newPlayer).append( playerImage );
							
			$('.player', newPlayer).text( playerInfo.attr('Player_Name') );
			$('.team', newPlayer).text( $('Team', playerInfo).text() );
				
			$('.gp', newPlayer).text( $('Games_Played', playerInfo).text() );
			$('.goals', newPlayer).text( $('Goals', playerInfo).text() );
			$('.assists', newPlayer).text( $('Assists', playerInfo).text() );
				
			$('.points', newPlayer).text( $('Total_Points', playerInfo).text() );
			$('.pm', newPlayer).text( $('Plus_Minus', playerInfo).text() );
			$('.pmin', newPlayer).text( $('Penalty_Minutes', playerInfo).text() );
				
			$('.ppg', newPlayer).text( $('Power_Play_Goals', playerInfo).text() );
			$('.shg', newPlayer).text( $('Short_Handed_Goals', playerInfo).text() );
			$('.gwg', newPlayer).text( $('Game_Winning_Goals', playerInfo).text() );
			
			$('#players ul').append( $('<li>').append(newPlayer) );
		});
			
		$('#players').scrollbox();
	});
	
});
</script>
<style type="text/css">
	#players { width: 410px; height: 400px; overflow: hidden; }
	#players ul li { list-style-type: none; border-bottom:1px solid green; }
	.playerTable td { vertical-align:top; }
	#template { display:none; }
</style>
</head>
<body>

<div id="players">
	<ul></ul>
</div>

<table id="template" class="playerTable">
	<tr>
		<td rowspan="5" class="teamlogo"></td>
		<td rowspan="5" class="headshot"></td>
		<td colspan="6" class="player"></td>
	</tr>
	<tr>
		<td colspan="6" class="team"></td>
	</tr>
	<tr>
		<td>GP</td>
		<td class="gp"></td>
		<td>Goals</td>
		<td class"goals"></td>
		<td>Assists</td>
		<td class="assists"></td>
	</tr>
	<tr>
		<td>Points</td>
		<td class="points"></td>
		<td>P/M</td>
		<td class="pm"></td>
		<td>P Min</td>
		<td class="pmin"></td>
	</tr>
	<tr>
		<td>PPG</td>
		<td class="ppg"></td>
		<td>SHG</td>
		<td class="shg"></td>
		<td>GWG</td>
		<td class="gwg"></td>
	</tr>
</table>

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39724028
Chris I included wrong path for team logo.I can't thank you enough cause now I can show my boss the difference between pulling text stats or pulls text stats with teamlogo and player headshot Cause we got I a guy doing api's.In my opinion it makes what your looking at so much better then plain boring text And you thought me a trick or two. Your the man Chris.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39724120
Glad I could help :)
0
 

Author Comment

by:powerztom
ID: 39724954
Chris I got one last project to finish up on these gamecasts and one part I've been messing with I haven't got and I am willing to pay you $100 American cash for this last job. I get paid on tuesday and I can mail out the cash tues or weds morning. Cause it's a little more then a question. It involves canvas and drawing shapes that represent plays they(the plays)  get a tooltip.   I think it's hard but you might make a easy $100 I'm poor not cheap or else I'd up the money. So Let me know I hope yes cause so far you and Rob S have been coders from another planet.  It may be a easy pay day.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:powerztom
ID: 39746221
0
 

Author Comment

by:powerztom
ID: 39746487
0
 

Author Comment

by:powerztom
ID: 39772108
Chris can you help me scroll games left to right I tried the settings on the plugin's page so I was wondering are you still into solving problems ? If so http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28335607.html

your you of the great ones.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39776037
Hey Tom,

I've only just got back from holiday today, so I'm probably not going to have time to look at any EE stuff for a week or so.
0
 

Author Comment

by:powerztom
ID: 39776824
Hope you had a great holiday. All EE requests have been completed. I just got hockey left then I'm .NET Which I'm not bad at. But hockey will be like killing the beast at the end of the movie. Massive
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

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

744 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

12 Experts available now in Live!

Get 1:1 Help Now