Solved

Jquery and javascript in reading xml game file

Posted on 2014-02-06
7
384 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
Industry Leaders: 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!

 

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

Independent Software Vendors: 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

Suggested Solutions

Title # Comments Views Activity
Jquery HTML() with ajax... replacing content 2 31
Html using "Or" in condition 3 27
CSS for <center> 14 35
Telerik RadEditor Control Save 8 15
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

726 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