• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Jquery with table data markup

 
Naveen puttu
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey folks,

Facing some frustrating issue with jquery



here is the html code


So basically im trying to generate table data on the fly .

I can generate the data successfully now . There are 2 rows of data and i can see them coming up

But the issue is that every click adds to the previous existing data . so 3 click is displaying me 6 rows of data

So how would refresh the table data

Cheers
jquery noob
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Since you are using jQuery, why are you not using jQuery?

In other words, an onclick in the HTML. really? come on!

I'm not sure what the issue is, I'd suggest cleaning up event handling and then seeing where things stand.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Also, please, better subjects than "strange issue". Please?
 
Naveen puttu
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a lot for the response Bear . No one is born as THE BEST programmer .

I believe in making things work and then look for re-factoring the code and stuff .

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you are here to get quick-fix answers, JavaRanch may be the wrong place. If you are here to learn, you are in the right place. Don't take bluntness as criticism. It's intended to help you.

If you are having issues with event handlers, the first thing to fix is to declare them properly.

If you are using jQuery 1.3 or later, the live() method can let you establish event handlers even before the DOM elements are created. It's ideal for an Ajax environment where elements will come into existence after page load.

(It can also help prevent multiple simultaneous handlers from being accidentally established -- which may be what is at work here.)

 
Naveen puttu
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
im using javascript onClick function because click event doesnt seem to be working with anchor tag.

i have tried all possibilities like



And it doesnt work ( im using 1.2.6 jquery jar )

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That will work fine, but assumes that the element already exists. With bind() and click(), you can't instrument an object that does not exist yet.

Where are you trying to establish the click handler?

In jQuery 1.3 and later, you'll be able to use live(). In jQuery 1.2 you'll either need to do it in the callback handler from the Ajax call after the DOM has been created, or use the livequery plugin.

Using onclick in the HTML is never the right thing to do.
 
Naveen puttu
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Bear ,

im looking into livequery now . Looks lke rocket science for me

in the meantime i have a small query that popped up .

i have an anchor tag with onClick javascript method associated with it (as you saw in my example) . My query is , first time i click it ,the request is served and the data shows up in the div . the second click on the expanded div ,it collapses but again a request is sent to the server .

how do i stop this
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are you canceling the click action on the link?

Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you don't want subsequent clicks, you should remove the event handler after the first click.
 
Naveen puttu
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
@eric

i did not quite understand your question . what did you mean by "canceling"
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Your link is still acting like a link. It is resetting the page so you need to stop that action from happening.

http://api.jquery.com/event.preventDefault/

Eric
 
Naveen puttu
Ranch Hand
Posts: 88
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
@eric

the link that your talking about doesnt work with 1.2.6 version that im using right now.

So, im trying to use livequery and NO GO .

Can you tell me how to go about fixing this wrt the code snippet in this post
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64717
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The more interesting question to ask is: if you don't want it to act like a link, why use an <a> tag at all? All you are doing is making things way more complicated than they need to be, creating a lot of work for yourself, and creating points of failure.

You can make anything clickable; don't use a link if you don't need a link.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic