JavaScript only working on some pages

I am using the following javascript to allow me to highlight a tr row when clicking on it

  $(document).ready(function () {
    $('tr').click(function () {
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', '#D3D3D3');
        }
        else {
            $(this).css('background', 'white');
        }
    });
});

Open in new window

his works fine here: http://mr-tipster.com/pages/newcard.php?venue=Haydock&time=2:10

but if i select the following link:http://mr-tipster.com/pages/newcard.php?venue=Haydock&time=3:50 it does not work and I cant understand why as it uses the same code

the full JavaScript is as follows
var ie = document.all
var ns = document.getElementById && !ie
function rowclick(e) {
var obj = ns ? e.target : event.srcElement
if (obj.tagName=="TD") {

obj.onblur=function() {

}
}
}

$(document).ready(function () {
    $('tr').click(function () {
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', '#D3D3D3');
        }
        else {
            $(this).css('background', 'white');
        }
    });
});




$('table tr').click(rowclick)

document.onclick=rowclick

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);



      function drawChart() {




        var data = google.visualization.arrayToDataTable([  <?php echo $data; ?>   ]);



        var data2 = google.visualization.arrayToDataTable([ <?php echo $datagoing; ?>   ]);


        var options = {
          backgroundColor: 'transparent',
            legend: 'none',
            height: '100px',
            width: '100px',
               chartArea: { height :"95%", width:"95%" },

        };

        var options2 = {
          backgroundColor: 'transparent',
            legend: 'none',
            height: '100px',
            width: '100px',
               chartArea: { height :"95%", width:"95%" },
        };


        var chart = new google.visualization.PieChart(document.getElementById('piechart<?php echo $loop ?>'));
        chart.draw(data, options);

        var chart2 = new google.visualization.PieChart(document.getElementById('piechartgoing<?php echo $loop ?>'));
        chart2.draw(data2, options2);

      }

Open in new window

runnerjp2005Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
sorry but your HTML source is totally invalid.
You have script and style content before the opening HTML tag:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style type="text/css">
table { /* Will apply to all tables */
    border-spacing: 0;
    /* OR border-collapse: collapse; */
}
tr td{
border:0px;
  border-bottom:1pt solid black;
margin:0; 
	padding:0; 
    width:1%;
    white-space:nowrap;
}
 
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
	margin-bottom:25px;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}


.green {
	color: black;
	margin-bottom:5px;
	margin-top:5px;
	border: solid 1px #b7b7b7;
	font-weight: bold;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.green:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.green:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

</style>

Open in new window

You have the document ready code multiple times in the generated source.
You assign the click event multiple times.
You load the jQuery libraries multiple times.
You have script tags inside the table element between tds (not inside td) and tr (not inside a td).
You miss the opening body tag.
...
Before searching for why this works on one parameter and not on the other, please update the base DOM.

HTH
Rainer
0
Alexandre SimõesManager / Technology SpecialistCommented:
The reason is simple: You're handling the tr click event as many times as you have rows.
Probably you have this script block inside a row template or something.

The result is that if the number of rows is odd, the script acts as you expect, if it's pair it looks like the row never get selected.

The solution is also simple: Move the tr click event handler outside the row template and put it at the end of the newcard.php page.
Ideally you should put all your javascript code in one or more js files.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brian TaoSenior Business Solutions ConsultantCommented:
*** No points for me please because only when I submitted I saw Alexandre Simões's comment.  Mine is basically the same but is 5 minutes late.  I would still like to keep my comment here for record though. ***

The reason why it works on some pages and not on others is that: it works on those page with odd number of horses (9, 11 etc.) and doesn't work on those pages with even number of horses (8, 10 and so on).

The root cause is that you put the script tag and the $(document).ready() call in a PHP loop and it's wrong.  When you do this you're binding the same event handler to the TR multiple times.  When it runs even number of times, it actually still works but it IS CHANGED BACK TO WHITE after those runs.

You only need it once so move it outside of your PHP loop.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.