Solved

SCROLLING XML DATA

Posted on 2013-12-13
12
338 Views
Last Modified: 2013-12-16
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
0
Comment
Question by:powerztom
  • 6
  • 5
12 Comments
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39717880
I downloaded all files, uploaded to my server and get a blank page when I locad the HTML page......
0
 

Author Comment

by:powerztom
ID: 39718154
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
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39718631
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

0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39718643
That second lot of code you posted won't work - you're triyng to populate your new table like this:

$('.rank', newGame).html( $('rank', listing).text() );

But the #gameTable table doesn't have the right classes!

The syntax error you're getting is because of the selector you're using:

$('# ul').append( $('<li>').append(newGame) );

'# ul' is not a valid selector. Maybe you meant:

'#games ul'
0
 

Author Comment

by:powerztom
ID: 39719088
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
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39719987
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 :)
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:powerztom
ID: 39721513
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?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39721547
Rob!!

Chris :)

I do like sports - mainly surfing, skiing, rock climbing, MTB :)
0
 

Author Comment

by:powerztom
ID: 39721608
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?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39721877
Sure, it's done with CSS, on the UL:

#QB ul { list-style-type: none; }
0
 

Author Closing Comment

by:powerztom
ID: 39722509
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.
0
 

Author Comment

by:powerztom
ID: 39722627
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.







http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28319592.html
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)

762 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

18 Experts available now in Live!

Get 1:1 Help Now