Solved

javascript & jquery bizarre problems

Posted on 2014-03-20
2
238 Views
Last Modified: 2014-03-24
Here if you check in time http://sportsnetwork.com/gamecast/MLB/GameCastver1.html slow connection
If not I'm having  problems with the with baseball field and stick figures and uniforms page the two logos used to rotate the logo to the left would always be the team in the field. And team in the field is the team at bat which is wrong should be the opposite. I have a team error in firebug I couldn't solve.this also worked perfectly but I'm not sure what went wrong cause I'm using I thought a reliable copy. One last thing the pitcher is supposed to be current pitcher in the xml file just below the score these are quite a few problems man I would love to have them fixed that's why I posted last attempt. Uniforms should change for team in the field. That's 4 issues A Life preserver help?

<!doctype html>
<html>
<link rel="stylesheet" href="css/jquery-ui-1.8.9.customver1.css">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.GCPBP {
    color: white;
}
#apDiv1 {
    position: absolute;
    width: 17px;
    height: 28px;
    z-index: 10;
    left: 218px;
    top: 368px;
}
#apDiv2 {
    position: absolute;
    width: 16px;
    height: 34px;
    z-index: 20;
    left: 197px;
    top: 368px;
}
#apDiv3 {
    position: absolute;
    width: 21px;
    height: 30px;
    z-index: 25;
    left: 197px;
    top: 308px;
}
#apDiv4 {
    position: absolute;
    width: 17px;
    height: 33px;
    z-index: 30;
    left: 289px;
    top: 295px;
}
#apDiv5 {
    position: absolute;
    width: 16px;
    height: 33px;
    z-index: 35;
    left: 320px;
    top: 303px;
}
#apDiv6 {
    position: absolute;
    width: 19px;
    height: 32px;
    z-index: 40;
    left: 225px;
    top: 276px;
}
#apDiv7 {
    position: absolute;
    width: 24px;
    height: 38px;
    z-index: 45;
    left: 173px;
    top: 261px;
}
#apDiv8 {
    position: absolute;
    width: 14px;
    height: 37px;
    z-index: 46;
    left: 136px;
    top: 268px;
}
#apDiv9 {
    position: absolute;
    width: 21px;
    height: 32px;
    z-index: 50;
    left: 99px;
    top: 282px;
}
#apDiv10 {
    position: absolute;
    width: 20px;
    height: 38px;
    z-index: 55;
    left: 67px;
    top: 290px;
}
#apDiv11 {
    position: absolute;
    width: 17px;
    height: 37px;
    z-index: 60;
    left: 321px;
    top: 254px;
}
#apDiv12 {
    position: absolute;
    width: 19px;
    height: 35px;
    z-index: 65;
    left: 205px;
    top: 235px;
}
#apDiv13 {
    position: absolute;
    width: 18px;
    height: 37px;
    z-index: 70;
    left: 69px;
    top: 244px;
}
#P,#C,#FB,#SB,#SS,#TB,#LF,#CF,#RF , #HPUmpire,#TBUmpire,#SBUmpire,#FBUmpire {
    /*border: 1px solid white;*/
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
    var xmlPath = '/xml/mlb/scores/real';
  var xmlGameID = '41880';
  var srcFieldTeamLogo;
  //var playerImage;
var txtpitcher
var pitcherid
  var intPosID = {
    'P': {
        pos: 'Pitcher',
        id: 0,
        name: 'unknown'
    },
    'C': {
        pos: 'Catcher',
        id: 0,
        name: 'unknown'
    },
    'FB': {
        pos: 'First Base',
        id: 0,
        name: 'unknown'
    },
    'SB': {
        pos: 'Second Base',
        id: 0,
        name: 'unknown'
    },
    'SS': {
        pos: 'ShortStop',
        id: 0,
        name: 'unknown'
    },
    'TB': {
        pos: 'Third Base',
        id: 0,
        name: 'unknown'
    },
    'LF': {
        pos: 'Left Field',
        id: 0,
        name: 'unknown'
    },
    'CF': {
        pos: 'Center Field',
        id: 0,
        name: 'unknown'
    },
    'RF': {
        pos: 'Right Field',
        id: 0,
        name: 'unknown'
    },
    'HPUmpire': {
        pos: 'Home Plate Umpire',
        id: 0,
        name: 'unknown'
    },
    'TBUmpire': {
        pos: 'Third Base Umpire',
        id: 0,
        name: 'unknown'
    },
    'SBUmpire': {
        pos: 'Second Base Umpire',
        id: 0,
        name: 'unknown'
    },
    'FBUmpire': {
        pos: 'First Base Umpire',
        id: 0,
        name: 'unknown'
    }
  };
 
 
var txtPitcher
var intPitcher
stadiums = {
    "wrigley field":"wrigley.gif",
    "comerica park":"comerica.gif" ,
    "yankee stadium":"yankee.jpg" ,
    "shea stadium":"shea.jpg" ,
    "angel stadium of anaheim":"angel.jpg" ,
    "rangers ballpark in arlington":"angel.jpg" ,
    "at&t park":"attpark.jpg" ,
    "citizens bank park":"citizenballpark.jpg" ,
    "coors field":"coors.jpg" ,
    "busch stadium":"busch.jpg" ,
    "oriole park at camden yards":"camden_baltimore.jpg",
    "dodger stadium":"dodgers.jpg" ,
    "chase field":"chasefield.jpg" ,
    "tropicana field":"tropicana.jpg" ,
    "great american ball park":"greatamerican.jpg" ,
    "kauffman stadium":"kauffmanstadium.jpg" ,
    "mcafee coliseum":"mcafeecoliseum.jpg" ,
    "hubert h. humphrey metrodome":"metrodome.jpg" ,
    "metrodome":"metrodome.jpg" ,
    "miller park":"millerpark.jpg" ,
    "minute maid park":"minutemaid.jpg" ,
    "nationals park":"nationalspark.jpg" ,
    "petco park":"petcopark.jpg" ,
    "pnc park":"pncpark.jpg" ,
    "progressive field":"progressive.jpg" ,
    "rogers centre":"rogerscentre.jpg" ,
    "safeco field":"safecofield.jpg" ,
    "turner field":"turnerfield.jpg" ,
    "dolphin stadium":"dolphinstadium.jpg" ,
    "fenway park":"fenwaypark.jpg" ,
    "u.s. cellular field":"uscellularfield.jpg" ,
    "oakland-alameda county coliseum":"mcafeecoliseum.jpg",
    "marlins park":"marlins.jpg",
    "citi field":"citifield.jpg",
   
     "target field":"targetfield.jpg"
} // no comma on the last
 
var homeTurf = {
    "minnesota":"target field",
  "philadelphia":"citizens bank park",
  "milwaukee":"miller park",
  "san francisco":"u.s. cellular field",
  "la angels":"angel stadium of anaheim",
  "tampa bay":"tropicana field",
  "chicago wsox":"u.s. cellular field",
  "oakland":"oakland-alameda county coliseum",
  "kansas city":"kauffman stadium",
  "los angeles":"dodger stadium",
  "san diego":"petco park",
  "boston":"fenway park",
  "seattle":"safeco field",
  "detroit":"comerica park",
  "atlanta":"turner field",
  "baltimore":"oriole park at camden yards",
  "miami":"marlins park",
  "pittsburgh":"pnc park",
  "ny mets":"citi field",
  "st. louis":"busch stadium",
  "houston":"minute maid park",
  "cleveland":"progressive field",
  "cincinnati":"great american ball park",
  "texas":"rangers ballpark in arlington",
  "toronto":"rogers centre",
  "chicago cubs":"wrigley field",
  "arizona":"chase field",
  "colorado":"coors field",
  "ny yankees":"yankee stadium",
  "washington":"nationals park"
}
 
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: xmlPath+"/"+xmlGameID+".xml",
       
        dataType: "xml",
        success: function(data){
            var d = $(data);
            var Play = d.find('Play');
            var Teams = $(data).find("Team");
           
            $.each(Teams,function(i,Team) {
                
       
                team=$(Team);
                    var id = team.attr("ID").toLowerCase();
                   
                    var homeOrAway = team.attr("vh");
                    var name = team.attr("name").toLowerCase();
               
                    if (homeOrAway=="H") {
                    var stadium_location = stadiums[homeTurf[name]]; // or have
                    var url = "http://images.sportsnetwork.com/mlb/attheballpark/stadiums/";
                    url = (stadium_location) ?url + stadium_location:"default.gif";
                    $("#imgStad").attr("src",url)
                    //  $('#imgStad').attr('src', imgStad);
                    var loc = Play.attr('Location') ;
                    var locate = "Location" + $('#txtBallparkname').html(loc).toUpperCase;
                     var d = $(data);
                d.find('Team').each(function(i,Team){
                    if ($(Team).attr('vh') == "H") {
 
                        $('#imghometeam').attr('src', 'http://sportsnetwork.com/MLB/MLB/' +$(Team).attr('ID') + ".png");
 
                    }
                })
                d.find('Team').each(function(i,Team){
                    if ($(Team).attr('vh') == "A") {
 
                        $('#imgawayteam').attr('src', 'http://sportsnetwork.com/MLB/MLB/' +$(Team).attr('ID') + ".png");
 
                    }
                });
           
                }         
            });
        }
    });
 
    $('#P,#C,#FB,#SB,#SS,#TB,#LF,#CF,#RF').hover(function(){
        $('#playerImage').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/players/'+intPosID[this.id].id+'.jpg');
        $('#PlayerName').html(intPosID[this.id].name);
        $('#PositionName').html(intPosID[this.id].pos);
    },function() {
        $('#playerImage').attr('src', 'http://sportsnetwork.com/gamecast/mlb/Images/blank.png');
        $('#PlayerName').html('&nbsp;');
        $('#PositionName').html('&nbsp;');
    });
/*
$('#P').hover(function(){
        $('#playerImage').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/players/'+pitcherid+'.jpg');
        $('#PlayerName').html(txtPitcher);
        $('#PositionName').html("Pitcher");
    },function() {
        $('#playerImage').attr('src', 'http://sportsnetwork.com/gamecast/mlb/Images/blank.png');
        $('#PlayerName').html('&nbsp;');
        $('#PositionName').html('&nbsp;');
    });
*/
    $('#HPUmpire,#TBUmpire,#SBUmpire,#FBUmpire').hover(function(){
        $('#playerImage').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/umpires/'+intPosID[this.id].id+'.jpg');
        $('#PlayerName').html(intPosID[this.id].name);
        $('#PositionName').html(intPosID[this.id].pos);
    },function() {
        $('#playerImage').attr('src', 'http://sportsnetwork.com/gamecast/mlb/Images/blank.png');
        $('#PlayerName').html('&nbsp;');
        $('#PositionName').html('&nbsp;');
    });
 
});
 
 
function loadAll() {
 
    $.ajax({
        type: "GET",
        url: xmlPath+"/"+xmlGameID+".xml",
   
        dataType: "xml",
        success: function(data){
            var d = $(data);
if (d.find('Play').attr("Status").toUpperCase() === "FINAL") {
        clearInterval(myVar);
      }
       var colNodes = d.find('Play').children();
                for (var i=0; i < colNodes.length; i++) {
                    var objNode = colNodes[i];
                    //document.getElementById("demo").innerHTML += '/'+objNode.nodeName;
                    switch(objNode.nodeName) {
                        case 'Batter':
                            txtBatter = $(objNode).attr('FirstName') + ' ' + $(objNode).attr('Lastname');
                            intBatter = $(objNode).attr('ID');
 
                            intBatterSave = intBatter;
 
                            break;
                        case 'Pitcher':
                            txtPitcher = $(objNode).attr('FirstName') + ' ' + $(objNode).attr('Lastname');
                            intPitcher = $(objNode).attr('ID');
 
                            break;
 
                    }
                }
    //  if (d.find('Play').attr("NoPlay").toUpperCase() === '1') {
     //   $('#txtBallparkname').html("Rain Delay");
      
     //   clearInterval(myVar);
    //  }
      // if (d.find('Play').attr("NoPlay").toUpperCase() === '0') {
       
      
      //  setInterval(myVar);
     // }
            for (var posItem in intPosID) {
                posItem.updated = false;
            }
$(d.find('Pitcher')).each(function(i, nodePlayer){ // always 1!
    nodePlayer = $(nodePlayer);
    var posItem = intPosID['P'];
    if (posItem) { // && !posItem.updated
        posItem.id = nodePlayer.attr('ID');
        posItem.name = nodePlayer.attr('FirstName') + ' ' + nodePlayer.attr('Lastname');
        posItem.updated = true;
        //tempCount++;
    }
});
            $(d.find('Fielders')).find('Player').each(function(indexPlayer, nodePlayer){
                nodePlayer = $(nodePlayer);
                var posItem = intPosID[nodePlayer.attr('Pos').trim().replace('1B', 'FB').replace('2B', 'SB').replace('3B', 'TB')];
                if (posItem) {
                    posItem.id = nodePlayer.attr('ID');
                    posItem.name = nodePlayer.attr('FirstName') + ' ' + nodePlayer.attr('Lastname');
                    posItem.updated = true;
                } else {
                    //console.log('invalid player positem: ' + nodePlayer.attr('Pos'));
                }
            });
            $(d.find('Umpires')).find('*').each(function(indexUmpire, nodeUmpire){
                nodeUmpire = $(nodeUmpire);
                var posItem = intPosID[nodeUmpire.prop('nodeName')];
                if (posItem) {
                    posItem.id = nodeUmpire.attr('ID');
                    posItem.name = nodeUmpire.text();
                    posItem.updated = true;
                } else {
                    //console.log('invalid umpire positem: ' + nodeUmpire.prop('nodeName'));
                }
            });
 
            /*
            var tempCount = 0;
            for (var posItem in intPosID) {
                if (!posItem.updated) {
                    tempCount++;
                }
            }
            $('#txtBallparkname').html('temp debug: ' + tempCount + ' items NOT updated');
            */
 
            var tempCount = 0;
 
            var intPitcherTeamID = d.find('Pitcher').attr('TeamID');
            var intBatterTeamID = d.find('Batter').attr('TeamID');
            $('#imgawayteam').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/MLB/' +intBatterTeamID + ".png");
            $('#imghometeam').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/MLB/' + intPitcherTeamID + ".png");
            // BattersSameTeamAsPitcher
            $(d.find('Batters[TeamID="' + intPitcherTeamID + '"]')).find('Player').each(function(i, nodePlayer){
                nodePlayer = $(nodePlayer);
                var posPlayer = nodePlayer.attr('Pos').replace('1B', 'FB').replace('2B', 'SB').replace('3B', 'TB');
                var posItem = intPosID[posPlayer];
                if (posItem) { // && !posItem.updated
                    posItem.id = nodePlayer.attr('ID');
                    posItem.name = nodePlayer.attr('FirstName') + ' ' + nodePlayer.attr('Lastname');
                    posItem.updated = true;
                    tempCount++;
                }
            });
            //$('#txtBallparkname').html('temp debug: ' + tempCount + ' items extra updated!');
 
 
            var Fielder = $(d.find('Fielders').find('Player:first'));
            var Team = $(d.find("Team[ID='" + Fielder.attr('TeamID') + "']"));
            var unfrm = Team.attr('Uniform'); // +'.gif';
            $('#P,#C,#FB,#SB,#SS,#TB,#LF,#CF,#RF').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/pbp_logos/'+unfrm);
            //srcFieldTeamLogo = 'http://images.sportsnetwork.com/MLB/attheballpark/pbp_logos/'+Team.attr('ID')+'.png';
            //var d = $(data);
            //var Pitchers = $(d.find('Batters').find('Player:first'));
            ///var Team = $(d.find("Team[ID='" + Batter.attr('TeamID') + "']"));
            //var unfrm = Team.attr('Uniform');
            //var bat = Batter.attr("Bats");
           
            //if (srcFieldTeamLogo != "") $('#srcFieldTeamLogo').attr('src', srcFieldTeamLogo);
 
        }
    })
}
</script>
</head>
 
<body bgcolor="#000000">
 
<table width="100%" border="0">
  <tr>
    <td><strong class="GCPBP" id="txtBallparkname">BallParkname</strong></td>
  </tr>
</table>
<tr>
  <td>&nbsp;</td>
<tr>
<table width="400" border="0">
  <tr>
    <td><table width="400" border="0">
      <tr>
        <td width="67" rowspan="4"><p><img src="BBLogo.png" alt="" name="imghometeam" width="78" height="76" id="imghometeam"></p></td>
        <td width="81" rowspan="4"><img src="Images/Blank.png" alt="" width="73" height="75" id="playerImage"></td>
        <td width="156">&nbsp;</td>
        <td width="78" rowspan="4"><img src="BBLogo.png" name="imgawayteam" width="78" height="76" id="imgawayteam"></td>
      </tr>
      <tr>
        <td class="PlayerName"><div align="center" id="PlayerName">Player Name</div></td>
      </tr>
      <tr>
        <td><div align="center"></div></td>
      </tr>
      <tr>
        <td class="PositionName"><div align="center" id="PositionName">Position Name</div></td>
      </tr>
    </table>
      <table width="400" border="0">
        <tr>
          <td><div id="apDiv1"><img src="Images/Uniforms/umpire.gif" alt="" name="HPUmpire" width="11" height="30" id="HPUmpire"></div>            <div id="apDiv2"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="C" width="11" height="30" id="C"></div>            <div id="apDiv6"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="SB" width="11" height="30" id="SB"></div>
            <div id="apDiv7"><img src="Images/Uniforms/umpire.gif" alt="" name="SBUmpire" width="11" height="30" id="SBUmpire"></div>
            <div id="apDiv8"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="SS" width="11" height="30" id="SS"></div>
            <div id="apDiv9"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="TB" width="11" height="30" id="TB"></div>
            <div id="apDiv10"><img src="Images/Uniforms/umpire.gif" alt="" name="TBUmpire" width="11" height="30" id="TBUmpire"></div>
            <div id="apDiv12"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="CF" width="11" height="30" id="CF"></div>
            <div id="apDiv13"><img src="Images/Uniforms/040_unif_homeold.gif" alt="" name="RF" width="11" height="30" id="RF"></div>
            <img src="http://images.sportsnetwork.com/mlb/attheballpark/stadiums/default.gif" name="imgStad" width="390" height="273" id="imgStad">
            <div id="apDiv11"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="LF" width="11" height="30" id="LF"></div>
            <div id="apDiv5"><img src="Images/Uniforms/umpire.gif" alt="" name="FBUmpire" width="11" height="30" id="FBUmpire"></div>
            <div id="apDiv4"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="FB" width="11" height="30" id="FB"></div>
            <div id="apDiv3"><img src="Images/Uniforms/040_unif_awayold.gif" alt="" name="P" width="11" height="30" id="P"></div>
          </td>
        </tr>
      </table>
      <p align="center">&nbsp;</p>
   </td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<script>
var myVar = setInterval(myTimer,2000);
 
function myTimer()
{
    //var d=new Date();
    //var t=d.toLocaleTimeString();
    //document.getElementById("demo").innerHTML=t;
    loadAll();
}
  </script>
</body>
</html>

Open in new window

Please Help check out while game is on. Thanks EE
Field.html
41880.XML
0
Comment
Question by:powerztom
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39948702
Here's something to get you going. It may even solve most problems as errors at one point can stop code in another place from running at all...

Line 298 is wrong in a number of ways.
var locate = "Location" + $('#txtBallparkname').html(loc).toUpperCase;

Open in new window

should probably be something like:
$('#txtBallparkname').html("Location: " + loc.toUpperCase());

Open in new window

By the way, that table with the location name seems to shift the player positions on the field. Could be solved by 'float'ing it but a nicer solution (imho) would be to put the stadium/field image in a relatively positioned div and then position the players and umpires within that div. That way, they will go wherever the field goes from now on.

Lines 299-313 can probably be removed altogether let me describe what the current code does: inside the team loop you do another 2 team loops, checking for home/away again while that code is inside an if which checks for home team. When I say it like that I hope you understand that's not very efficient code to say the least.

It should be enough to have something like this:
            $.each(Teams,function(i,Team) {


                team=$(Team);
                var id = team.attr("ID").toLowerCase();
                var homeOrAway = team.attr("vh");

                $(homeOrAway=="H" ? '#imghometeam' : '#imgawayteam').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/MLB/' + id + ".png"); // path was wrong: http://sportsnetwork.com/MLB/MLB/

                var name = team.attr("name").toLowerCase();

Open in new window

where line 8 is the new line I added (within the existing code) instead of the existing code block (on lines 299-313).

But the thing is, in the loadAll function, those 2 images (home and away team) are also set, but from a different source (attr teamid on pitcher and batter) which should be the same but if you do manual testing (like me) by changing an id in the xml file then it will matter which one you change! So it would actually be better to set these images in 1 location in your source code (the loadAll function) or at least make a function for it that you can call from document.ready as well as loadAll (if you don't want a delay before the images appear).

PS: one more thing I noticed is that the 'hover' player name and position are invisible because they are black text on a black background so you may want to add some css to change that.
0
 

Author Closing Comment

by:powerztom
ID: 39950405
Valuable info leading into a new last question. Thanks Rob
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 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

11 Experts available now in Live!

Get 1:1 Help Now