?
Solved

SCROLLING XML DATA

Posted on 2013-12-13
12
Medium Priority
?
386 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
[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
  • 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 43

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
Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 2000 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 43

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
 

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 43

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 43

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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

770 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