Jquery and javascript in reading xml game file

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
powerztomAsked:
Who is Participating?
 
Chris StanyonCommented:
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
 
Chris StanyonCommented:
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
 
powerztomAuthor Commented:
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
powerztomAuthor Commented:
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
 
powerztomAuthor Commented:
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
 
powerztomAuthor Commented:
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
 
Chris StanyonCommented:
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
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.