Solved

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

Posted on 2013-11-26
5
364 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 500 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
The viewer will learn how to dynamically set the form action using jQuery.
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…

707 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