Solved

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

Posted on 2013-12-30
4
326 Views
Last Modified: 2013-12-30
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
0
Comment
Question by:powerztom
  • 2
4 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39746677
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39746685
capture
0
 

Author Closing Comment

by:powerztom
ID: 39746728
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39746729
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

758 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

21 Experts available now in Live!

Get 1:1 Help Now