Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Repeating image when it should be different from static xml file

Posted on 2014-01-16
9
Medium Priority
?
249 Views
Last Modified: 2014-01-16
I'm getting a repeating headshot image in a html table Every table represents a new player so I need the accurate player's headshot. Run html page to see.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.scrollbox.js"></script>
<script type="text/javascript">

	var xmlPath = '.' //'/xml/nba/scores/real';
	var xmlGameID = 'ADX-INDSTATS-PHI'; 

	$(document).ready(function() {
		var myVar = setInterval(getsimple, 10000);
		getsimple();
	});

	function getsimple() {
		$.get(xmlPath + "/" + xmlGameID + ".xml", function(data) {
			var d = $(data);
			var message = d.find('message');
			var title = $("Title", message).text();
			var teamid = $("TeamID", message).text();
			$('#title1').text(title);
			$('#teamid1').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/logos/' + teamid + '.png');
			playerData = $(data);
			players = playerData.find('Individual_Stats');
			playerData.find('Individual_Stats').each(function(i, player) {
			
			var newPlayer = $('#template').clone().removeAttr('id');
			
           $('.NHLPlayer').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/players/'+ $('Player_ID', player).text() +".jpg");	
           
			
			$('.pn', newPlayer).text( $(player).attr('Player_Name') );
			
				$('.p', newPlayer).text( $('Position', player).text() );
			$('.j', newPlayer).text( $('Jersey_Number', player).text() );
				$('.gp', newPlayer).text( $('Games_Played', player).text() );
			$('.g', newPlayer).text( $('Goals', player).text() );
			$('.a', newPlayer).text( $('Assists', player).text() );
				
			$('.tp', newPlayer).text( $('Total_Points', player).text() );
			$('#players ul').append( $('<li>').append(newPlayer) );
		});
			
		$('#players').scrollbox({
		linear: true,
  step: 1,
  delay: 0,
  speed: 100
	
	
				
			});
		});
	}

</script>
<link rel="stylesheet" href="http://powerzsoftware.com/css/jquery-ui-1.8.9.customver1.css">
<style type="text/css">
	#players { width: 435px; 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" width="400" border="0">
  <tr>
    <td width="73"><div align="center"><img src="Logos/130.png" name="teamid1" width="50" height="50" id="teamid1"></div></td>
    <td colspan="6"><div align="center" id="title1"></div></td>
  </tr>
  <tr>
    <td rowspan="3"><div align="center"><img src="http://sportsnetwork.com/gamecast/Images/NHLPLAYER.png" name="NHLPlayer" width="50" height="50" id="NHLPlayer" class="NHLPlayer"></div></td>
    <td colspan="6" class="pn"><div align="center"></div></td>
  </tr>
  <tr>
    <td width="84"><div align="center">Position</div></td>
    <td width="22" class="p"><div align="center"></div></td>
    <td width="57"><div align="center">Jersey #</div></td>
    <td width="21"class="j"><div align="center"></div></td>
    <td width="90"><div align="center">Games Played</div></td>
    <td width="23" class="gp"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center">Goals</div></td>
    <td class="g"><div align="center"></div></td>
    <td><div align="center">Assists</div></td>
    <td class="a"><div align="center"></div></td>
    <td><div align="center">Total Points</div></td>
    <td class="tp"><div align="center"></div></td>
  </tr>
</table>
</body>
</html>

Open in new window

ADX-INDSTATS-PHI.xml
fLYERS.html
jquery.scrollbox.js
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
  • 5
  • 4
9 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39786393
Replacing from line 28 to 33:
playerData.find('Individual_Stats').each(function(i, player) {
			
			var newPlayer = $('#template').clone();
			$(newPlayer).attr('id', 'player' + i);
			
			var image_url = 'http://images.sportsnetwork.com/nhl/attherink/players/'+ $('Player_ID', player).text() +'.jpg';
			
			$(newPlayer).find('.NHLPlayer').attr('src', image_url);

Open in new window

0
 

Author Comment

by:powerztom
ID: 39786498
Tried it Tommy Boy No Luck but thanks for your post.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39786542
FlyersWorks in my test. What are we doing differently? Can I see your updated code?
0
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 

Author Comment

by:powerztom
ID: 39786637
Tommy Boy check it out
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.scrollbox.js"></script>
<script type="text/javascript">

	var xmlPath = '.' //'/xml/nba/scores/real';
	var xmlGameID = 'ADX-INDSTATS-PHI'; 

	$(document).ready(function() {
		var myVar = setInterval(getsimple, 10000);
		getsimple();
	});

	function getsimple() {
		$.get(xmlPath + "/" + xmlGameID + ".xml", function(data) {
			var d = $(data);
			var message = d.find('message');
			var title = $("Title", message).text();
			var teamid = $("TeamID", message).text();
			$('#title1').text(title);
			$('#teamid1').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/logos/' + teamid + '.png');
			playerData = $(data);
			players = playerData.find('Individual_Stats');
			playerData.find('Individual_Stats').each(function(i, player) {
			
			var newPlayer = $('#template').clone()
			$(newPlayer).attr('id', 'player' + i);
			
			var image_url = 'http://images.sportsnetwork.com/nhl/attherink/players/			'+ $('Player_ID', player).text() +'.jpg';
			
			$(newPlayer).find('.NHLPlayer').attr('src', image_url);
          	
           
			
			$('.pn', newPlayer).text( $(player).attr('Player_Name') );
			
				$('.p', newPlayer).text( $('Position', player).text() );
			$('.j', newPlayer).text( $('Jersey_Number', player).text() );
				$('.gp', newPlayer).text( $('Games_Played', player).text() );
			$('.g', newPlayer).text( $('Goals', player).text() );
			$('.a', newPlayer).text( $('Assists', player).text() );
				
			$('.tp', newPlayer).text( $('Total_Points', player).text() );
			 $('.NHLPlayer').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/players/'+ $('Player_ID', player).text() +".jpg");
			$('#players ul').append( $('<li>').append(newPlayer) );
		});
			
		$('#players').scrollbox({
		linear: true,
  step: 1,
  delay: 0,
  speed: 100
	
	
				
			});
		});
	}

</script>
<link rel="stylesheet" href="http://powerzsoftware.com/css/jquery-ui-1.8.9.customver1.css">
<style type="text/css">
	#players { width: 435px; 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" width="400" border="0">
  <tr>
    <td width="73"><div align="center"><img src="Logos/130.png" name="teamid1" width="50" height="50" id="teamid1"></div></td>
    <td colspan="6"><div align="center" id="title1"></div></td>
  </tr>
  <tr>
    <td rowspan="3"><div align="center"><img src="http://sportsnetwork.com/gamecast/Images/NHLPLAYER.png" name="NHLPlayer" width="50" height="50" id="NHLPlayer" class="NHLPlayer"></div></td>
    <td colspan="6" class="pn"><div align="center"></div></td>
  </tr>
  <tr>
    <td width="84"><div align="center">Position</div></td>
    <td width="22" class="p"><div align="center"></div></td>
    <td width="57"><div align="center">Jersey #</div></td>
    <td width="21"class="j"><div align="center"></div></td>
    <td width="90"><div align="center">Games Played</div></td>
    <td width="23" class="gp"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center">Goals</div></td>
    <td class="g"><div align="center"></div></td>
    <td><div align="center">Assists</div></td>
    <td class="a"><div align="center"></div></td>
    <td><div align="center">Total Points</div></td>
    <td class="tp"><div align="center"></div></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39786724
Line 33 has a lot of extra spaces in it. That will break up the url and make it invalid. It should be:

var image_url = 'http://images.sportsnetwork.com/nhl/attherink/players/'+ $('Player_ID', player).text() +'.jpg';
0
 

Author Comment

by:powerztom
ID: 39786825
Tom I added the line and still repeating images can you post your code cause from screen shot it looks like you got it. Can you upload it maybe somewhere something is missing? I just don't know. I made a duplicate totally by accident I've been doing multiple things all morning and afternoon and I submitted a dup.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 39786866
The complete getSimple() script from my test.
function getsimple() {
		$.get(xmlPath + "/" + xmlGameID + ".xml", function(data) {
			var d = $(data);
			var message = d.find('message');
			var title = $("Title", message).text();
			var teamid = $("TeamID", message).text();
			$('#title1').text(title);
			$('#teamid1').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/logos/' + teamid + '.png');
			playerData = $(data);
			players = playerData.find('Individual_Stats');
			playerData.find('Individual_Stats').each(function(i, player) {
			
			var newPlayer = $('#template').clone();
			$(newPlayer).attr('id', 'player' + i);
			
			var image_url = 'http://images.sportsnetwork.com/nhl/attherink/players/'+ $('Player_ID', player).text() +'.jpg';
			
			$(newPlayer).find('.NHLPlayer').attr('src', image_url);           
			
			$('.pn', newPlayer).text( $(player).attr('Player_Name') );
			
				$('.p', newPlayer).text( $('Position', player).text() );
			$('.j', newPlayer).text( $('Jersey_Number', player).text() );
				$('.gp', newPlayer).text( $('Games_Played', player).text() );
			$('.g', newPlayer).text( $('Goals', player).text() );
			$('.a', newPlayer).text( $('Assists', player).text() );
				
			$('.tp', newPlayer).text( $('Total_Points', player).text() );
			$('#players ul').append( $('<li>').append(newPlayer) );
		});
			
		$('#players').scrollbox({
		linear: true,
  step: 1,
  delay: 0,
  speed: 100
	
	
				
			});
		});
	}

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39786921
Tommy Boy Saves the day. Something somewhere in the getsimple function on my side wasn't right Thanks Man. I appreciate your patience trying to solve this.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39787007
You didn't even begin to try my patience. This one was easy. Thanks for the points.
0

Featured Post

PowerShell Core for Advanced Linux Administrators

Understand advanced principals around Powershell Core with a focus on the Linux Administrator.  This course covers how to administer numerous environments across multiple platforms including Linux, Azure, AWS, and Google Cloud from a single shell instance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
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…
Suggested Courses

721 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