This week's book giveaway is in the Java 8 forum.
We're giving away four copies of Java 8 in Action and have Raoul-Gabriel Urma, Mario Fusco, and Alan Mycroft on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes change event is firing twice Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Java 8 in Action this week in the Java 8 forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "change event is firing twice" Watch "change event is firing twice" New topic
Author

change event is firing twice

J. Kevin Robbins
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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?


"There is no reason for any individual to have a computer in his home" ~ Ken Olson, Co-founder of DEC, 1977
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60074
    
  65

You haven't shown how you are binding the change handler.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
J. Kevin Robbins
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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

Joined: Jan 10, 2002
Posts: 60074
    
  65

That's way too much code to wade through. Please submit an SSCCE that demonstrates the issue.
J. Kevin Robbins
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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

Joined: Jan 10, 2002
Posts: 60074
    
  65

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
Ranch Hand

Joined: Dec 16, 2010
Posts: 633
    
    7

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

Joined: Jan 10, 2002
Posts: 60074
    
  65

"Lessons learned" is what the Ranch is all about!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: change event is firing twice
 
Similar Threads
table columns not sorted by Tablekit after AJAX call and <div> is added
Need help on understanding ww:token
wrestling with json
problem with jsp for reset() method
ajax call in jquery