Solved

Jquery and javascript in reading xml game file

Posted on 2014-02-06
7
368 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now