• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

change event is firing twice

 
J. Kevin Robbins
Bartender
Pie
Posts: 1793
20
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is another "works in FF but not in IE" issue. The following code works in FF. The headings are retrieved once and appended once, as expected.

I added the alert boxes when I found that the column headings were being appended twice in IE. The alerts show me that the ajax call is running twice.

The html generated by the jsp is very basic; no fancy input widgets or anything.

This is IE6 and due to the total lack of debugging tools I'm at a loss as how to figure out why the change event and hence the ajax call are running twice. Any ideas?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You haven't shown how you are binding the change handler.
 
J. Kevin Robbins
Bartender
Pie
Posts: 1793
20
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It's in document.ready. Here's the entire mess.


Excuse the horrible aoData.push code there at the end. I'm still working on a plugin to collect form input fields and convert them to an object format that datatables will accept as the aoData parameter.
 
J. Kevin Robbins
Bartender
Pie
Posts: 1793
20
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This just gets weirder. Still, working fine in FF, fails in IE. What I'm getting now is a change event when clicking anywhere on the page, but only once. Here's the html as generated by the jsp page.

Choosing an option from the select list inserts a html fragment. If the first option is chosen, this is the html inserted:

Now at this point I can click anywhere on the page and get a change event shown by the alert box on line four of the following external js file, but only once. After that I can select my parameters and run the query and not get another change event unless I select a new option from the initial select box.


Any ideas on this one? It's driving me crazy...How is a change event getting bound to the entire document?!? Freakin' IE gives me more gray hair everyday.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's way too much code to wade through. Please submit an SSCCE that demonstrates the issue.
 
J. Kevin Robbins
Bartender
Pie
Posts: 1793
20
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yeah, I was afraid of that. That's todays project; a test app from the ground up. I suspect that I'm going to find that it's related to the embedded javascript in the html fragment that's being inserted. That's a technique I've never used, and honestly, I didn't even think it would work since the doc.ready event has already passed at that point, but to my surprise, the datepickers initialized okay.

Hopefully, by tomorrow, I'll either have this conquered or I'll have a small app that replicates the same problem.
 
J. Kevin Robbins
Bartender
Pie
Posts: 1793
20
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I found the culprit! This single line of code was causing the problem:



I wish you could explain that one to me, Bear, because I lifted it from JQIA.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Within an event handler, that line of code will find any element that is a child of the event target that has the attribute value="choose", and will then remove it.

In jQIA it is used to remove the "choose one" option from a select element once something has been explicitly selected from that select.
 
J. Kevin Robbins
Bartender
Pie
Posts: 1793
20
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Within an event handler, that line of code will find any element that is a child of the event target that has the attribute value="choose", and will then remove it.

In jQIA it is used to remove the "choose one" option from a select element once something has been explicitly selected from that select.


That's how I was using it; to remove the "Please Choose an Option" entry from the select box. But it appears that removing that entry was detected by IE as a change event that was left "hanging" out there until a click anywhere on the page triggered the event. It seems to be related to the fact that I was running it within the "success" function of an ajax call. I moved that line of code to immediately follow the change event like this and now all is well. Lesson learned.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
"Lessons learned" is what the Ranch is all about!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic