can't get image to show jquery and one xml text value willnot display

Hey what up Guys. I'm having two issues for my Scoreboard for College Football 1 can't get the main two images to display however I can get same team logos to show in a different size and location. I'm using a selector maybe that's it but it's not showing me any failure in firebug. 2 there is a attribute in xml stats file right at the top it called BallYrd it indicates where the ball is spotted on the field. It's the yellow textbox next to green back saying ball is on............. Anyway the yellow text box is where BallYrd is supposed to go. I'll attached files needed to see this problem.
40350.XML
ScoreBoardCC.html
powerztomAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Robert SchuttConnect With a Mentor Software EngineerCommented:
1) the pictures work for me if I use the same url (on line 86) that is used for the small pix:
$(selector4).attr('src', 'http://sportsnetwork.com/gamecast/mnincfoot/' + team.attr('ID') + '.png');

Open in new window

2) the yellow box has id 'ballon', which is also used in a <td> earlier, that one should be deleted I guess.
            <tr>
              <td width="12%" bgcolor="#000000"><div align="center"><strong id="Staduim2"><img src="http://powerzsoftware.com/tsn/nfl/minilogos/football.png" alt="" name="imgball" width="32" height="21" id="imgball3"></strong></div></td>
              <td width="36%" bgcolor="#006633"><div align="center" class="ballonyd"><strong>ball is spotted</strong></div></td>
              <td width="10%" bgcolor="#FFFF33"><div align="center" id="ballon"></div></td>

Open in new window

(EDIT: the code above has a duplicate id="ballon" in the td on line 2 in your original code)
0
 
Robert SchuttSoftware EngineerCommented:
capture
0
 
powerztomAuthor Commented:
Rob,

Thanks Problem 1 is a I can make accusations but right now I'm beat and just happy you told me about mini and ballon duplicate. Hope you had a great holiday. As always A+ Troubleshooting. I guess if I was a notepad guy instead of dreamweaver some of these errors  would be more oblivious. Maybe that will be my new years promise ditch DW.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This would be easier if you can post a working link along with your code.  I placed it in jsbin to debug and had make some changes  http://jsbin.com/eNISuWug/2/edit?html,js,output

First your js, make sure to run it through jslint or http://jsbeautifier.org/.  Also remember, no tabs, just spaces in your code.  I replaced the xml info with http://jsbin.com/iFodoBeh/1/js

I think this is working though http://jsbin.com/eNISuWug/2/

On your end you will want to put this back.
var PossID = 0;

var QueryString = function () {
    var query_string = {};
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        //Iffirstentrywiththisname
        if (typeof query_string[pair[0]] === "undefined") {
            query_string[pair[0]] = pair[1];
            //Ifsecondentrywiththisname
        }
        else if(typeof query_string[pair[0]] === "string") {
            var arr = [query_string[pair[0]], pair[1]];
            query_string[pair[0]] = arr;
            //Ifthirdorlaterentrywiththisname
        } else {
            query_string[pair[0]].push(pair[1]);
        }
    }
    return query_string;
}();
$(document).ready(function () {
    var xmlPath = 'http://jsbin.com/iFodoBeh/1/js'; ///xml/cfoot/scores/real';
    var xmlGameID = '40350'; //QueryString.gameID;
    $.ajax({
        type: "GET",
        url: xmlPath, 
      //+ "/" + xmlGameID + ".xml",
        dataType: "xml",
        success: function (data) {
            var d = $(data);

            d.find('Team').each(function (i, Team) {
                var team = $(Team);
                var id = team.attr("ID").toLowerCase();
                var teamname = team.attr("name");
                var homeOrAway = team.attr("vh");
                var selector3 = (homeOrAway == "A") ? '#txtaway' : '#txthome';
                var selector4 = (homeOrAway == "A") ? '#imgVisitHelmet' : '#imgHomeHelmet';
                var selector5 = (homeOrAway == "A") ? '#VS' : '#HS';
                $(selector3).html(teamname);
                $(selector4).attr('src', 'http://dev.sportsnetwork.com/cfoot3/Cfootlogos/' + team.attr('ID') + '.png');
                $(selector5).html(team.find('Linescore').attr('Score'));


            });
        }
    });
});

function loadData() {
    var xmlPath = 'http://jsbin.com/iFodoBeh/1/js'; //'/xml/cfoot/scores/real';
    var xmlGameID = '40350'; //QueryString.gameID;
    $.ajax({
        type: "GET",
        url: xmlPath,
      // + "/" + xmlGameID + ".xml",
        dataType: "xml",
        success: function (data) {
            var d = $(data);
            var Play = d.find('Play');
            $('#Staduim').html($(Play).attr('Location'));
            var inn = Play.attr('TimeLeft');
            PossID = Play.attr('PossID');
            $('#miniaway2').attr('src', 'http://sportsnetwork.com/gamecast/mnincfoot/' + PossID + '.png');

            $('#time').html(inn);
            var bo = Play.attr('BallYrd');
            $('#ballon').html(bo);
            var dn = Play.attr('ResultingDown');
            //$('#Down').html(dn);
            $('#downX').html(dn);
            var ydtogo = Play.attr('ResultingToGo');
            //$('#Ydstogo').html(ydtogo);
            $('#yardX').html(ydtogo);

            d.find('Team').each(function (i, Team) {
                var team = $(Team);
                var vh = team.attr('vh'); //AorH...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
                $('#txt' + sHomeOrAway).html(team.attr('name'));

                $('#' + (vh == 'H' ? 'H' : 'V') + 'S').html(team.find('Linescore').attr('Score'));
                $('#mini' + sHomeOrAway).attr('src', 'http://sportsnetwork.com/gamecast/mnincfoot/' + team.attr('ID') + '.png');
                $(Team).find('LineQuarter').each(function () {
                    $('#period' + vh + Math.min(5, $(this).attr('Qtr'))).text($(this).attr('score'));
                });
            }); //eachTeam

            var qtr = Play.attr('Quarter');
            if (qtr == 4) {
                $('#Q').html("4thQuarter");
            }
            else if(qtr == 3) {
                $('#Q').html("3rdQuarter");
            }
            else if(qtr == 2) {
                $('#Q').html("2ndQuarter");
            }
            else if(qtr == 1) {
                $('#Q').html("1stQuarter");
            } else {
                $('#Q').text("FINAL");
            }
            //++counterXml;
        }
    }); //ajax
}

Open in new window

  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="http://powerzsoftware.com/css/jquery-ui-1.8.9.customver1.css">
<style type="text/css">
.ballonyd {
	color: #FFF;
}
.centermid {
	text-align: center;
	vertical-align: middle;
}
.staduim {
	color: #FFF;
}
.awayscore {
	color: #FFF;
	font-size: 55px;
    font-weight: bold;
}
.homescore {
	color: #FFF;
	font-size: 55px;
    font-weight: bold;
}
.formatcellcenter {text-align: center;
	vertical-align: middle;
}
.rr {background-color: #FFF;
}
.tablebord {
	border: medium solid #999;
}
.grass {
	background-image: url(Images/field.gif);
	background-repeat: no-repeat;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

  </head>


<body>
<table width="700" border="2" class="tablebord">
  <tr>
    <td height="166" bgcolor="#000000"><table width="100%" border="0" class="grass">
      <tr>
        <td width="13%" height="150" class="centermid"><span class="rr"><img src="http://powerzsoftware.com/tsn/IMAGES/VistorHelmet.png" alt="" name="imgVisitHelmet" width="48" height="62" class="formatcellcenter" id="imgVisitHelmet"></span></td>
        <td width="13%" class="centermid"><span class="awayscore" id="VS">0</span></td>
        <td width="46%"><table width="100%" border="0">
          <tr bgcolor="#E1E1E1" class="GCPBP">
            <td width="12%"><div align="center" id="time"></div></td>
            <td width="36%"><div align="center" id="Q"></div></td>
            <td width="11%"><div align="center">1</div></td>
            <td width="10%"><div align="center">2</div></td>
            <td width="9%"><div align="center">3</div></td>
            <td width="11%"><div align="center">4</div></td>
            <td width="11%"><div align="center">OT</div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="http://powerzsoftware.com/tsn/nfl//miniLogos/074.png" alt="" name="miniaway" width="27" height="24" id="miniaway"></div></td>
            <td bgcolor="#FFCC66"><div align="left" id="txtaway"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA5"></div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="http://powerzsoftware.com/tsn/nfl//minilogos/071.png" alt="" name="minihome" width="25" height="22" id="minihome"></div></td>
            <td bgcolor="#FFCC66"><div align="left" id="txthome"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH5"></div></td>
          </tr>
        </table>
          <table width="100%" border="0">
            <tr>
              <td width="12%" bgcolor="#000000" id="ballon"><div align="center"><strong id="Staduim2"><img src="http://powerzsoftware.com/tsn/nfl/minilogos/football.png" alt="" name="imgball" width="32" height="21" id="imgball3"></strong></div></td>
              <td width="36%" bgcolor="#006633"><div align="center" class="ballonyd"><strong>ball is spotted</strong></div></td>
              <td width="10%" bgcolor="#FFFF33"><div align="center" id="ballon"></div></td>
              <td width="11%" bgcolor="#000000"><img src="http://powerzsoftware.com/tsn/nfl/miniLogos/074.png" alt="" name="dy" width="32" height="32" id="miniaway2"></td>
              <td width="9%" bgcolor="#FFCC33"><div align="center" id="downX"></div></td>
              <td width="11%" bgcolor="#FF9900"><div align="center">&amp;</div></td>
              <td width="11%" bgcolor="#FFCC33"><div align="center" id="yardX"></div></td>
            </tr>
          </table>
          <table width="308" height="49" border="0">
            <tr>
              <td class="GCPBP"><div align="center"><strong class="GCPBP" id="Staduim">Staduim</strong></div></td>
            </tr>
          </table></td>
        <td width="14%" class="centermid"><span class="homescore" id="HS">0</span></td>
        <td width="14%" class="centermid"><img src="http://powerzsoftware.com/tsn/IMAGES/VistorHelmet.png" alt="" name="imgHomeHelmet" width="61" height="78" id="imgHomeHelmet"></td>
      </tr>
      <tr>
        <td height="2" colspan="5"></td>
      </tr>
    </table></td>
  </tr>
</table>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();
//checkStatus();
}
</script>
</body>
</html>

Open in new window

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.