Why are these Element.observe 'ajax:events' firing immediately? - Prototype

Question

I've got a form_element I want to change the styling of when it is posted.

I changed already working code like this:

form_element.observe("ajax:before", function(){ /*do stuff*/ });

to this:

form_element.observe("ajax:before", changeFormToPostingStyle(form_element));

For some reason the second one fires immediately when the page is loaded - and this is regardless of the event. I tried changing the event ajax:complete/success/whatever and it still fires off prematurely. Any ideas?

Answer 1

It triggers at the time of the statement because

changeFormToPostingStyle(form_element)

is a call to a function and the observe expects that to BE the function or a call to a function that returns a function. Change it to

form_element.observe("ajax:before", function() { changeFormToPostingStyle(this) });

or

form_element.observe("ajax:before", changeFormToPostingStyle);

and use this in that function