asked on

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

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

jb1dev

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

ASKER CERTIFIED SOLUTION

jb1dev

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

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.

Tom Powers

ASKER

Never mind jb1dev I got it thanks for the solution.

jb1dev

$('.gameid', newGame).prop( 'value', 'Gamecast' );