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

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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?

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; }

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