Member_2_5230414
asked on
JavaScript only working on some pages
I am using the following javascript to allow me to highlight a tr row when clicking on it
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
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', '#D3D3D3');
}
else {
$(this).css('background', 'white');
}
});
});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);
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
*** 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.
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.
sorry but your HTML source is totally invalid.
You have script and style content before the opening HTML tag:
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