Solved

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

Posted on 2013-12-30
4
332 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: 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
How do I post more than 1 item to php backend 24 32
toggle content 12 29
SQL Server XML Select sub tables 4 33
Diff of the day 2 11
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
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)

730 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