?
Solved

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

Posted on 2013-11-26
5
Medium Priority
?
367 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
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

649 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