Solved

Jquery and javascript in reading xml game file

Posted on 2014-02-06
7
374 Views
Last Modified: 2014-03-24
I am creating a mobile app. I want to make a section called current play. I have regular code for this but I get losed. I have laid it out in a table. The code should pick the lastseq or last xml file. The only thing is the seq file number within the xml game file they are not consistent. Example first seq in attached file is 3991338 next 3991342 then 3991344 and you get the point. I just want for this section is to teamid logo, player headshot, playtype, time left, gameplay text and peroid number in place of the # in the header. And selectors for two teams logos and scores at the bottom. I tried to use different pieces of code. But half the problem is I may be programming in wrong syntax cause it's mobile. If you see the table you can see what I'm after. For TeamID AND pLAYER id IT COMES IN LIKE THIS

var playTypes = {
    "GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
    "MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
    "BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
    "ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
    "HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
    "PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'},
    "PREADY": {subnode: '', teamidnode: '', playeridnode: ''},
    "PSTR": {subnode: '', teamidnode: '', playeridnode: ''},
    "PEND": {subnode: '', teamidnode: '', playeridnode: ''}
};

function getInfo(playNode) {
    var ret = {};
    ret.GameID = playNode.attr('GameID');
    //ret.Seq = Number(playNode.attr('Seq'));
    ret.Quarter = playNode.attr('Quarter');
    ret.PlayType = playNode.attr('PlayType');
    ret.TimeLeft = playNode.attr('TimeLeft');

    var narr = playNode.find('narrative');
    ret.NarrTxt = narr.attr('text');
    // debug
    //ret.NarrTxt = '[' + playNode.attr('Seq') + '] ' + ret.NarrTxt;

    var pt, subnode;
    if ((pt = playTypes[ret.PlayType]) && pt.subnode && (subnode = playNode.find(pt.subnode))) {
        ret.TeamID = subnode.attr(pt.teamidnode);
        ret.PlayerID = subnode.attr(pt.playeridnode);
    }

    return ret;
}

Open in new window



 inf = getInfo(d.find('Play').first());
    $('#imgTeamlogo1').attr('src', inf.TeamID ? 'http:///SPORTSNETWORK/gamecast/NHL/logos/' + inf.TeamID + '.png' : "http:/SPORTSNETWORK/gamecast/NHL/logos/Teamlogo.png");
    $('#imgplayerHeadshot').attr('src', inf.PlayerID ? 'http://images.sportsnetwork.com/nhl/attherink/players/' + inf.PlayerID + '.jpg' : "http://199.233.14.112/aspdata/NHL2/IMAGES/player.png");
    $('#txtAction').html(inf.PlayType);
    $('#txtGameP').html(inf.NarrTxt);

Open in new window


THIS IS SOME CODE

Team Logo path http://sportsnetwork.com/gamecast/nhl/logos/

Player headshot
http://images.sportsnetwork.com/nhl/attherink/players/

Any Questions ask Thanks EE Desktop Version came out great just want to continue with Mobile which Is new to me I'm Reading This isn't configured just wanted to see if it is different doing it mobile is it   $mobile ?
NHL.zip
0
Comment
Question by:powerztom
  • 4
  • 3
7 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39843328
Hey Tom,

Had a quick look at your files but it doesn't really make sense. You have no jQuery library loaded and absolutely no jQuery code in your files.

We've already gone through this kind of thing before, so I can't see what the problem is. It will be the same as your desktop version, so start there and ask if you get specific problems
0
 

Author Comment

by:powerztom
ID: 39848650
Hey Chris and EE i WORKED ON my Mobile I thought it would be different snytax cause it was mobile any way I worked on this a while cause I'm not a great Developer. But I used selectors for bottom team logos and score. I return the period number is this case it's 1. I tried var Quart = Play.attr("Quarter")
           
            $(p).html("Peroid") + (Quart); didn't work any Ideas?

And the top five two images and 3 text srings I

function getPlayInfo(play) {
	var teamID, playerID;
	var playTypes = {
		"GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
		"MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
		"BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
		"ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
		"HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
		"PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'}
	};
	
	if ( playInfo = $(playTypes).attr( play.attr('PlayType')) ) {
		teamID = play.find(playInfo.subnode).attr(playInfo.teamidnode);
		playerID = play.find(playInfo.subnode).attr(playInfo.playeridnode);
	}

	return {
		'teamImg'	: (teamID) ? 'http://sportsnetwork.com/gamecast/nhl/logos/' + teamID + '.png': 'http://powerzsoftware.com/tsn/IMAGES/NHLLOGOX.png',
		'playerImg'	: (playerID) ? 'http://images.sportsnetwork.com/nhl/attherink/players/' + playerID + '.jpg' : 'http://powerzsoftware.com/tsn/IMAGES/sKATE.png',
		'playType'	: play.attr('PlayType'),
		'playtime'  : play.attr('TimeLeft'),
		'playNarr'	: play.find('narrative').attr('text')
	}
}

Open in new window

 This part I return the 5 elements I need to display but I am unsure how to display these 5 elements.  the return is

return {
		'teamImg'	: (teamID) ? 'http://sportsnetwork.com/gamecast/nhl/logos/' + teamID + '.png': 'http://powerzsoftware.com/tsn/IMAGES/NHLLOGOX.png',
		'playerImg'	: (playerID) ? 'http://images.sportsnetwork.com/nhl/attherink/players/' + playerID + '.jpg' : 'http://powerzsoftware.com/tsn/IMAGES/sKATE.png',
		'playType'	: play.attr('PlayType'),
		'playtime'  : play.attr('TimeLeft'),
		'playNarr'	: play.find('narrative').attr('text')
	}
}

Open in new window

Thanks EE
18627.XML
currentplay3.html
respond.min.js
jquery-ui-1.8.9.customver1.css
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39848931
Hey Tom,

Your coding is definitely improving. You almost had it nailed. Couple of things. To write the quarter to the table, you need to select the element with an ID of p and then concatenate the values like this:

$(p).html("Peroid") + (Quart); <-- Wrong
$('#p').html("Period " + Quart); <-- Correct

To display the five elements, you assign the function return value to an object variable and then access the properties of the object:

//assign the return of getPlayInfo() to variable
playInfo = getPlayInfo(play);
//access the properties of the variable
alert(playInfo.teamImg);
alert(playInfo.playerImg);

Here's a working copy of your page. Mostly it's your code, just cleaned up a little :)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Chris Stanyon">
	<title>Experts Exchange // Q_28358483</title>
	<link rel="stylesheet" href="jquery-ui-1.8.9.customver1.css">
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	xmlPath = '.' ;
	xmlGameID ='18627';
		
	$(document).ready(function() {
		$.ajax({
			type: "GET",
			url:  xmlPath + "/" + xmlGameID + ".xml",
			dataType: "xml",
			success: function(data) {
				gameData = $(data);
				play = gameData.find('Play');
				quarter = play.attr("Quarter");
				$('#p').html("Period " + quarter);
				$('Team', gameData).each(function(i, Team) {
					team = $(Team);
					id = team.attr("ID").toLowerCase();
					vh = team.attr('vh');
					sHomeOrAway = (vh == 'A') ? 'away':'home';
		
					$('#img' + sHomeOrAway).attr('src', 'http://sportsnetwork.com/gamecast/nhl/logos/' + id + '.png');
					$('#' + sHomeOrAway + 'teamscore').html(team.find('Linescore').attr('Score'));
				});
				
				playInfo = getPlayInfo(play);
				
				$('#teamID').attr('src', playInfo.teamImg);
				$('#playerID').attr('src', playInfo.playerImg);
				$('#playtype').html(playInfo.playType);
				$('#timeleft').html(playInfo.playTime);
				$('#txtgameplay').html(playInfo.playNarr);
			}
		});
	});
		
	function getPlayInfo(play) {
		teamID, playerID;
		playTypes = {
			"GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
			"MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
			"BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
			"ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
			"HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
			"PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'}
		};
			
		if ( playInfo = $(playTypes).attr( play.attr('PlayType') ) ) {
			teamID = play.find( playInfo.subnode ).attr( playInfo.teamidnode );
			playerID = play.find( playInfo.subnode ).attr( playInfo.playeridnode );
		}
			
		return {
			'teamImg'	: (teamID) ? 'http://sportsnetwork.com/gamecast/nhl/logos/' + teamID + '.png': 'http://powerzsoftware.com/tsn/IMAGES/NHLLOGOX.png',
			'playerImg'	: (playerID) ? 'http://images.sportsnetwork.com/nhl/attherink/players/' + playerID + '.jpg' : 'http://powerzsoftware.com/tsn/IMAGES/sKATE.png',
			'playType'	: play.attr('PlayType'),
			'playTime'  : play.attr('TimeLeft'),
			'playNarr'	: play.find('narrative').attr('text')
		};
	}
	</script>

	<style type="text/css" media="screen">
		.midcenter { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 36px; font-weight: bold; text-align: center; vertical-align: middle; }
		.small { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; }
	</style>
</head>
<body>
		
	<table width="100%" border="0">
		<tr>
			<td width="24%" class="midcentre"><img src="http://sportsnetwork.com/gamecast/nhl/130.png" id="teamID" height="50" width="50"></td>
			<td width="25%" class="midcenter"><img src="images.sportsnetwork.com/nhl/attherink/players/2867.jpg" id="playerID" height="75" width="50"></td>
			<td width="25%" class="small " id="playtype">&nbsp;</td>
			<td width="26%" class="small" id="timeleft">&nbsp;</td>
		</tr>
	</table>
		
	<table width="100%" border="0">
		<tr>
			<td><p class="small " id="txtgameplay" style="font-size: 12px; font-family: 'Palatino Linotype'">&nbsp;</p></td>
		</tr>
	</table>
	
	<table width="100%" border="0">
		<tr>
			<td width="24%"><p class="midcenter"><img src="http://sportsnetwork.com/gamecast/nhl/Logos/400.png" width="50" height="50" id="imgaway"></p></td>
			<td width="25%" class="midcenter" id="awayteamscore">0</td>
			<td width="25%" class="midcenter" id="hometeamscore">0</td>
			<td width="26%" class="midcenter"><img src="http://sportsnetwork.com/gamecast/nhl/136.png" id="imghome" height="50" width="50"></td>
		</tr>
	</table>
	
	<table width="100%" border="0">
		<tr>
			<td class="GCPBP" id="period"><div align="center" id="p" style="text-align: center" class="GCPBP">PERIOD #</div></td>
		</tr>
	</table>

</body>
</html>

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Closing Comment

by:powerztom
ID: 39850227
Chris,
Thanks for the compliment means alot coming from you. And thanks for taking  the time  to fix this page. I like the way you write code I'm learning from it. Tom
0
 

Author Comment

by:powerztom
ID: 39943438
Chris I got a nightmare the last page keeping me from finishing my end of the project. You heped me in the past I was wondering if you could play the hero. I got a page with like 4 problems you might be about to solve it quickly. Anyway If you can take a shot
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28393562.html
0
 

Author Comment

by:powerztom
ID: 39950639
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28395831.html


Chris can u give me a hand with this one. You did something similar to this before.Dude I'd really be thank  ful
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39950680
Hey Tom,

I may get a chance to look at it over the next couple of days, but I'm flat out with work at the minute.

Leave it with me...
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

785 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