wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Making all of a certain id have .click() Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Making all of a certain id have .click()" Watch "Making all of a certain id have .click()" New topic
Author

Making all of a certain id have .click()

Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I'm working on some sample code right now to learn jQuery so that I can add a pretty cool feature to my web app. What I want to do is have a table. And when you first load the table you have some basic information. The first cell of each row is an order number. When you click on that order number an ajax call is made to a servlet where I return some JSON. I then create a new row below the clicked row that has 1 cell. Inside that cell I create a new table with all the line detail about the table. Each line will be a new row in the new table. That's the ultimate goal.

Where I'm at right now is I'm trying to create a new row with the cell's .click() event. Then if it is clicked again I don't remove it, I just toggle() it. That way I don't have to load information that the user already asked for. I have this working.

My problem is that it only works for the first row of the table. I have the same id on all the rows when I load the table, but only the first row is clickable. Here is my JavaScript...



I know that I'm just missing something small with this. Your help is greatly appreciated.

[Edited post by adding line breaks....because it was scrolling...I did not make it proper with use of " + " because I just want to read the thing! - Eric Pascarello]
[ January 07, 2008: Message edited by: Eric Pascarello ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
id is sigular, you can not have multple elements with the same id.

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Reason you do not use the JQuery selector to add the click? Seems funny you use it to add the id [which is wrong since ids are singular] and not the event handler.

Eric
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Thanks for the 'big dummy' refresher. I forgot that simple little detail of ID being singular. Let me play with it for a few minutes and convert things over to class. I'll get right back to you and let you know how I made out.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Ok, here's the thing. I'm trying to stripe my table rows. So I am setting their class when .ready. The class is either even or odd. Then I need another way to tell that the row is an original row and not a row that I added with jquery.

I could do it if I could do something like $('.even || .odd').click()

I'm going to ask you how I would code that statement, but in the meantime I'll be looking it up. Or do I need two separate .click() events? I would think there is a way to do it with just one, since simplification is the name of the game with jQuery.

thanks for the help so far.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
So what I've come up with is this...please correct me if I'm wrong in my understanding...

When I code $('.stripeMe tr').click(fn(){

this works and only makes the original table rows clickable. Even though I add <tr> elements to the table it doesn't give them the ability to be clicked. This is perfect. Exactly how I want it. I'm just trying to figure out why. Is it because they were added after the .ready? So the .ready never gave them a .click event?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Think about it in a non code way.

There are 4 guys playing cards. The Dealer deals the cards to the guys sitting there at the table. A 5th guy sits down after the cards are dealt.

Q: Does the 5th guy have any cards to play with?

A: No because he came after the cards were dealt.

So after you add the new row [5th person] you would have to add the onclick [deal the new cards] to that row [5th player].

Eric
[ January 07, 2008: Message edited by: Eric Pascarello ]
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Exactly as I suspected Well I got it working pretty good. Right now I'm working on returning a JSON array from a servlet and then inserting those values into table rows, one for each row of info in JSON. That is tomorrow's quest.

Thanks a ton Eric.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
If you have a few bucks to spend...might be wise to pick up Bear's book on JQuery: http://www.manning.com/bibeault/ It is only in MEAP right now and it is a good read.

Eric
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I do want to get it. I was thinking about just waiting until the 15th (I think that is what Amazon listed as the release date). But, as it seems, I may need to get ahold of it early since I need to do the stuff now. I'll look into it and see if my company will spring for it or if it will be a personal expense. Either way, I think you are right.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Making all of a certain id have .click()
 
Similar Threads
Display values in jsp using json
center a div inside a div
jQuery - add rows to table from AJAX response
Problem on getting values from a radio buttons group
processing json in jquery