?
Solved

need to turn text into a button making the click pass data to browser

Posted on 2013-11-26
5
Medium Priority
?
365 Views
Last Modified: 2013-11-26
I have a scoreboard and I have everything created in code. there is a xml data value called status which I want to turn into a button that a pond clicking it you pass the gameid to browser url line. like sportspage1.html#278978 I tried several methods on enclosing the value for status and I can't get it cause it's my lack of knowledge the value is created in code The gameid represents the game being played and with it I use it to display and create a gamecast. But if someone can throw me a life preserver it would be a blessing heading into thanksgiving. I have the value captured I just need to pass it as you click status value.

$('.gameid', newGame).html( $('game_id', game).text() );  I attached a html that displays logos so it will be easier to view. Even a alert message I'll take it.
DailyNFL2.html
nfl.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
  • 3
  • 2
5 Comments
 
LVL 14

Expert Comment

by:jb1dev
ID: 39679007
See if this works for you.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL GAME SCHEDULE</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: 'nfl.xml',
		dataType: "xml"
	}).done(function(data) {
		$('game', data).each(function(i, game) {
			newGame = $('#gameTemplate').clone().removeAttr('id');
			
			$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('vteamid', game).text() + '.png') );
			$('.awayTeam', newGame).html( $('vteam', game).text() );
			$('.awayScore', newGame).html( $('vscore', game).text() );

			$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('hteamid', game).text() + '.png') );
			$('.homeTeam', newGame).html( $('hteam', game).text() );
			$('.homeScore', newGame).html( $('hscore', game).text() );

			$('.gameStatus', newGame).html( $('status', game).text() );

			$('.gameid', newGame).prop( 'value', $('game_id', game).text() );
			$('.gameid', newGame).click(
                function(){
                    window.location = 
                        "sportspage1.html#" + $('game_id', game).text();
                }
            );

			$('#games ul').append( $('<li>').append(newGame) );
		});
		
		$('#games').scrollbox({
			//switchItems: 2,
  		//	distance: 42,
 // linear: true,
 // step: 1,
 // delay: 0,
 // speed: 100
});
});
});
</script>
<style type="text/css" media="screen">
    #games {
	width: 225px;
	height: 400px;
	overflow: hidden;
}
#games { width: 300px; height: 300px; overflow: hidden; }
#games ul { padding: 0px; list-style-type:none; }
	#gameTemplate { display:none; }
	.gameLog { width: 225px; border-collapse:collapse; margin-bottom: 10px; }
	.gameLog td { text-align: center;  border: 1px solid #E8E1E1; }
	.gameLog col:nth-child(1) { width: 50px; }
	.gameLog col:nth-child(2) { width: 135px; }
	.gameLog col:nth-child(3) { width: 32px; }	
	.awayLogo img, .homeLogo img { width: 32px; height: 32px; }
</style>
</head>

<body>

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

<table id="gameTemplate" class="gameLog">
  <colgroup><col><col><col></colgroup>
	<tr>
		<td class="awayLogo"></td>
		<td class="awayTeam"></td>
		<td class="awayScore"></td>
	</tr>
	<tr>
		<td class="homeLogo"></td>
		<td class="homeTeam"></td>
		<td class="homeScore"></td>
	</tr>
	<tr>
		<td colspan="2" class="gameStatus"></td>
		<td colspan="1" class="gameidWrapper">
            <input type="button" class="gameid"></input> 
        </td>
	</tr>
</table>
	
</body>
</html>

Open in new window

0
 
LVL 14

Accepted Solution

by:
jb1dev earned 2000 total points
ID: 39679025
Basically that adds another column to your status row.

<td colspan="2" class="gameStatus"></td>
<td colspan="1" class="gameidWrapper">
        <input type="button" class="gameid"></input> 
</td>

Open in new window


And then when you are creating the html elements from the xml source in the ajax call, you add the button text (the id) and the click event which changes the browser location URL.

            $('.gameid', newGame).prop( 'value', $('game_id', game).text() );
            $('.gameid', newGame).click(
                function(){
                    window.location =
                        "sportspage1.html#" + $('game_id', game).text();
                }
            );

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39679124
This works for me except do you know any why to have text on button like Gamecast or look at attached html the text Go! I'll take button even below the date and time like another or new row saying Gamecast as text on button instead of actual game id. Believe me I'm happy with this it would just be nice to see text instead of numbers on button.
0
 

Author Comment

by:powerztom
ID: 39679173
Never mind jb1dev I got it thanks for the solution.
0
 
LVL 14

Expert Comment

by:jb1dev
ID: 39679405
$('.gameid', newGame).prop( 'value', 'Gamecast' );
0

Featured Post

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

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

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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

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