| Mouseover and Click - Selecting cells from tables
Click on table cell - results in function call |
pizzipie
msg:4449894 | 7:03 pm on May 5, 2012 (gmt 0) |
Hi,
I show table 1 (impTbl) to enable click on four choices. I will illustrate my problem while clicking on the Invoices cell. This works properly and does call showInvoices() which shows table 2 (invTbl), a list of invoices showing invoice id, vendor, and date. Now I want to duplicate that behavior and click on an invoice id cell in table 2 (invTbl) and have another table, table 3 (detTbl), to be created yet, which will show all the details of that invoice.
PROBLEM: I have tried to duplicate the mouseover and click codes, with appropriate changes in the selectors, to make this action happen in table 2 (invTbl). I can't get it to work.
I would appreciate any help in solving this.
Thanks, RP
Here is my code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery/jquery-1.7.js"></script>
<!-- ========== mouseover and click for #impTbl WORKS FINE ======== -->
<script type="text/javascript" >
$(function() {
$('.id').click(function() {
var choice=$.trim($(this).text());
if(choice=='Invoices') {
showInvoices();
}
});
$('#impTbl th').mouseover(function() {
$(this).addClass('selectedRow');
}).mouseout(function() {
$(this).removeClass('selectedRow');
}).click(function() {
});
});
</script>
<!-- ========== mouseover and click for #invTbl DOES NOT WORK ===== -->
<script type="text/javascript" >
$(function() {
$('#ino').click(function() {
var choice2=$.trim($(this).text());
alert("choice is "+choice2);
//if(choice=='Invoices') {
//showInvoices(choice);
});
//});
$('#invTbl #ino').mouseover(function() {
$(this).addClass('selectedRow');
}).mouseout(function() {
$(this).removeClass('selectedRow');
}).click(function() {
});
});
</script>
<!-- ============= showInvoices() ============== -->
<script type="text/javascript" >
function showInvoices() {
var table='invoice';
$.getJSON('sagleTableData.php?tbl='+table, function(invData) {
var content="";
content="<table id='invTbl' border='3' cellpadding='5' bgcolor='#fedde3'> \n"
+"<caption><big><b>Table \"invTbl\" after clicking Invoices</b></big></caption>"
+"<tbody><tr> <th>Invoice No.</th> <th>Vendor</th> <th>Date</th></tr> \n"
$.each(invData, function(key, val) {
content+="<tr><td id='ino' >"+val.invno+"</td><td>"+val.vendor+"</td><td>"+val.date+"</td></tr>";
});
content+="</tbody></table>";
$(content).appendTo("#rbox");
});// getJSON
} // showInvoices
</script>
<style type="text/css">
.selectedRow {
background-color: lightblue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<table id='impTbl' border="3" cellpadding="5" bgcolor="#fedde3">
<caption><big><b>This is "impTbl"- click Invoices </b></big></caption> <!-- see click function for impTbl line 16 -->
<tr> <th class='id'> Invoices </th> <th class='id'> Work Codes </th> <th class='id'> Projects </th> <th class="id"> Vendors </th> </tr>
<tr></tr>
</table>
</div>
<div id="rbox">
</div>
</body>
</html>
|
daveVk
msg:4450184 | 2:10 am on May 7, 2012 (gmt 0) |
$.each(invData, function(key, val) {
content+="<tr><td id='ino' >"+val.invno+"</td><td>"+val.vendor+"</td><td>"+val.date+"</td></tr>"; |
|
This is a misuse of id, you should not have multiple elements with same id. Change to class='ino'. Note that working case uses class ('.id') to install click handler.
Consider changing class='id' to something less confusing and more descriptive.
|
pizzipie
msg:4451339 | 3:28 pm on May 9, 2012 (gmt 0) |
Thanks Dave,
I've been playing around with this and I got the mouseover to change the background color and click to display an alert(). I placed the on() functions after #rbox was appended to. Now my question is: can the td id's be constructed like so: "...<td id='inv'>"...? THE ANSWER IS YES and it works!.
HOWEVER, I'm confused here as I expected trouble because you pointed out that the td's should not have the same id:
Code that works: Please comment, critique !
<script type="text/javascript" >
function showInvoices() {
var table='invoice';
$.getJSON('sagleTableData.php?tbl='+table, function(invData) {
var content="";
content="<table id='invTbl' border='3' cellpadding='5' bgcolor='#fedde3'> \n"
+"<caption><big><b>Table \"invTbl\" after clicking Invoices</b></big></caption>"
+"<tbody><tr> <th class='headId' >Invoice No.</th> <th class='headId' >Vendor</th> <th>Date</th></tr> \n"
$.each(invData, function(key, val) {
content+="<tr><td id='inv'>"+val.invno+"</td><td>"+val.vendor+"</td><td>"+val.date+"</td></tr>";
});
content+="</tbody></table>";
$(content).appendTo("#rbox");
// ========== mouseover and click for #invTbl placed after appendTo #rbox ========
$('#rbox').on("click", "#invTbl td#inv", function(e) {
var choice=$.trim($(this).text());
alert("choice is "+choice);
//if(choice=='Invoices') {
// showInvoices(choice);
//});
}); //#rbox
$('#rbox').on("mouseover", "#invTbl td#inv", function(e) {
$(this).addClass('selectedRow');
});
$('#rbox').on("mouseout", "#invTbl td#inv", function(e) {
$(this).removeClass('selectedRow');
});
}); // getJSON
} // showInvoices
</script>
|
Fotiman
msg:4451351 | 3:43 pm on May 9, 2012 (gmt 0) |
As pointed out, don't reuse ID values. ID's are unique.
Change this line:
content += "<tr><td id='inv'>" + val.invno + "</td><td>" + val.vendor + "</td><td>" + val.date + "</td></tr>";
|
|
To this:
content += "<tr><td class='inv'>" + val.invno + "</td><td>" + val.vendor + "</td><td>" + val.date + "</td></tr>";
|
|
Then change this:
$('#rbox').on("click", "#invTbl td#inv", function (e) {
|
|
To this:
$('#rbox').on("click", "#invTbl td.inv", function (e) {
|
|
And this:
$('#rbox').on("mouseover", "#invTbl td#inv", function (e) {
|
|
To this:
$('#rbox').on("mouseover", "#invTbl td.inv", function (e) {
|
|
And this:
$('#rbox').on("mouseout", "#invTbl td#inv", function (e) {
|
|
To this:
$('#rbox').on("mouseout", "#invTbl td.inv", function (e) {
|
|
|
pizzipie
msg:4451654 | 4:57 am on May 10, 2012 (gmt 0) |
SOLVED!
Thanks Fotiman,
I changed the code as you advised and it works fine.
RP
|
Fotiman
msg:4451816 | 1:48 pm on May 10, 2012 (gmt 0) |
Glad to help. :)
|
|
|
