homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved