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
powerztomAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
jb1devConnect With a Mentor Commented:
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
 
jb1devCommented:
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
 
powerztomAuthor Commented:
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
 
powerztomAuthor Commented:
Never mind jb1dev I got it thanks for the solution.
0
 
jb1devCommented:
$('.gameid', newGame).prop( 'value', 'Gamecast' );
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.