AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Tom Powers
Tom Powers
 asked on

SCROLLING XML DATA

i HAVE A XML DOC OF TOP QBs IN NFC and I wanted to have the rankings to scroll left or right I have a jquery plugin for the scrolling and I used tested code that had worked I had to alter it to fit my needs. EE CAN i GET A 21 POINT INSPECTION if your not in the US IT'S A REFERENCE TO AUTOMOTIVE SERVICE. HERE IS CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL QB RATINGS</title>
<script type="text/javascript" src="http://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: 'ABX-NFC-PASSERS.xml',
		dataType: "xml"
	}).done(function(data) {
		$('listing', data).each(function(i, listing) {
			newGame = $('#tablescroll').clone().removeAttr('id');
			
			
			$('.rank', newGame).html( $('rank', listing).text() );
			$('.player', newGame).html( $('player', listing).text() );
			$('.att', newGame).html( $('att', listing).text() );
			$('.comp', newGame).html( $('comp', listing).text() );
			
			$('.PctComp', newGame).html( $('PctComp', listing).text() );
			$('.yds', newGame).html( $('yds', listing).text() );

			$('.gameStatus', newGame).html( $('status', listing).text() );
			var newLink = $('<a>')
    .attr('href', '#')
    .text( $('player', game).text() )
   // .data('gameID', $('game_id', game).text() )
    .click( function(e) {
       e.preventDefault();
      window.location =
                        "TOPAFCQB.html#" + $('game_id', game).text();
    });

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

<body>

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

<table width="400" border="0" id="tablescroll">
  <tr>
    <td width="66"><div align="center">Ranking</div></td>
    <td width="62" class="rank"><div align="center"></div></td>
    <td colspan="4"class="player"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center">Att</div></td>
    <td class="att"><div align="center"></div></td>
    <td width="56"><div align="center">Comp</div></td>
    <td width="44" class="comp"><div align="center"></div></td>
    <td width="73"><div align="center">Total Yards</div></td>
    <td width="73" class="yds"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center">Int</div></td>
    <td class="int"><div align="center"></div></td>
    <td><div align="center">Longest</div></td>
    <td class="long"><div align="center"></div></td>
    <td><div align="center">TDS</div></td>
    <td class="TD"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td><div align="center">% Comp</div></td>
    <td class="PctComp"><div align="center"></div></td>
    <td colspan="2"><div align="center">QB Rating</div></td>
    <td class="rating"><div align="center"></div></td>
  </tr>
</table>
<p>&nbsp;</p>

	
</body>
</html>

Open in new window

  Attached is Jquery Plugin and qb xml and qb html
TOPAFCQB.html
jquery.scrollbox.js
ABX-AFC-PASSERS.xml
JavaScriptjQueryXML
Avatar of undefined
Last Comment
Tom Powers
8/22/2022 - Mon
dimmergeek
I downloaded all files, uploaded to my server and get a blank page when I locad the HTML page......
Tom Powers
ASKER
DimmerGeek,

That's why I posted this ticket  I thought I had coded everything correct but I got a blank page so something is off. Just not sure what if you figure it out post it. Thanks The attached files are wrong except plugin but page still comes up blank but I got a  Syntax error, unrecognized expression: # ul in Fire Bug My Bad it was the NFC QB I was working on.
TOPNFCQB.html
jquery.scrollbox.js
ABX-NFC-PASSERS.xml
Chris Stanyon
Hey Tom,

Couple of obvious problems. In the code you posted, you're looking for a file called ABX-NFC-PASSERS.xml, but attached a file called ABX-AFC-PASSERS.xml. Just double check your spelling :)

The reason you're getting a blank page is because you never add the new table to the document. You loop through the XML document, cloning the old table and populating the new one, but you never actually add it to the document.

Around about line 40, you'll need to append the new table to the BODY:

$('.gameStatus', newGame).html( newLink );
$('#games ul').append( $('<li>').append(newGame) );
$('body').append(newGame); <-- YOU NEED TO ADD THIS LINE
});

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
Chris Stanyon
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Tom Powers
ASKER
Chris,
There are two files cause of two NFL Leaques. But the AFC HTML I made Classes for rank att ect... And I called the div QB instead of games could you take a look at this cause alot of this xml files are formatted like this xml. I;ll attach html and xml and jquery plugin incase you don't have it. It's snowing and sleeting and ice all day today so I'll be here

I added in your changes here's the code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL QB RATINGS</title>
<script type="text/javascript" src="http://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: 'ABX-NFC-PASSERS.xml',
		dataType: "xml"
	}).done(function(data) {
		$('listing', data).each(function(i, listing) {
			newGame = $('#tablescroll').clone().removeAttr('id');
			
			
			$('.rank', newGame).html( $('rank', listing).text() );
			$('.player', newGame).html( $('player', listing).text() );
			$('.att', newGame).html( $('att', listing).text() );
			$('.comp', newGame).html( $('comp', listing).text() );
			
			$('.PctComp', newGame).html( $('PctComp', listing).text() );
			$('.yds', newGame).html( $('yds', listing).text() );

			
			var newLink = $('<a>')
    .attr('href', '#')
    .text( $('player', game).text() )
   // .data('gameID', $('game_id', game).text() )
    .click( function(e) {
       e.preventDefault();
      window.location =
                        "TOPAFCQB.html#" + $('player', game).text();
    });

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

<body>

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

<table width="400" border="0" id="tablescroll">
  <tr>
    <td width="66"><div align="center">Ranking</div></td>
    <td width="62" class="rank"><div align="center"></div></td>
    <td colspan="4"class="player"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center">Att</div></td>
    <td class="att"><div align="center"></div></td>
    <td width="56"><div align="center">Comp</div></td>
    <td width="44" class="comp"><div align="center"></div></td>
    <td width="73"><div align="center">Total Yards</div></td>
    <td width="73" class="yds"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center">Int</div></td>
    <td class="int"><div align="center"></div></td>
    <td><div align="center">Longest</div></td>
    <td class="long"><div align="center"></div></td>
    <td><div align="center">TDS</div></td>
    <td class="TD"><div align="center"></div></td>
  </tr>
  <tr>
    <td><div align="center"></div></td>
    <td><div align="center">% Comp</div></td>
    <td class="PctComp"><div align="center"></div></td>
    <td colspan="2"><div align="center">QB Rating</div></td>
    <td class="rating"><div align="center"></div></td>
  </tr>
</table>
<p>&nbsp;</p>

	
</body>
</html>

Open in new window

Thanks Chris
TOPAFCQB.html
ABX-AFC-PASSERS.xml
jquery.scrollbox.js
Chris Stanyon
OK. Couple of things you need to do.

In your code above, on lines 30 and 35 you're referring to your data as game, but it should be listing:

.text( $('player', listing).text() )
"TOPAFCQB.html#" + $('player', listing).text();

Also, you should only append the newGame once, so you need to remove the line where you append it to the body. Remove this line:

$('body').append(newGame);

After that it'll work fine...

enjoy the snow :)
Tom Powers
ASKER
Thanks Rob now I should be able to access alot of these xml files cause I believe their the same formats.Do you like sports by the way?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Chris Stanyon
Rob!!

Chris :)

I do like sports - mainly surfing, skiing, rock climbing, MTB :)
Tom Powers
ASKER
Chris you showed me in code how do you get rid of bullet point list dots. And I can't find where in my many html pages. Could you tell me again?
Chris Stanyon
Sure, it's done with CSS, on the UL:

#QB ul { list-style-type: none; }
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Tom Powers
ASKER
I'm sorry Chris Solved this a long time ago. His solution dead on. I wish I could bottle up chris and take him to work with me.Thanks Happy Holidays.
Tom Powers
ASKER
CHRIS i HAD TO THROW ONE IN AND I sorry that it is closed to what we were doing ON OTHER TICKETS i made classes and I have blank.png for two images playerID Head short and team logo. I need to get this done by tomorrow so if this is not to hard i'd appreciate it cause we are working with a outside vendor on json api's but I wanted a xml example that shines I think this top NHL SCORERS WITH HEADSHOT ANND LOGOS WOULD BE A COOL EXAMPLE.







https://www.experts-exchange.com/questions/28319592/Can't-get-xml-into-a-html-table.html
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent