observe_form, observe_field, dynamic forms help please

Setup:

A form which initially has only one field: a 2x group of radio_buttons. As the user selects options, additinal fields are added or removed.

I started with observe_field. I was getting some very peculiar behavior from observe_field and finally figured out why =>

Observe field only works for the first click. So it's not suitable for a form that reacts to user input since a user may select/unselect an option multiple times.

Next, I decided to use observe_form. At first, it seemed to overcome the problems of observe_field and reacted to every click of the radio_button. But then I discovered that it doesn't observe changes in fields that are not in the original source (the fields added by the user). So I'm back to ground zero.

I suppose I could build all the DOM objects from scratch and roll my own functions for adding/removing and call them via onclick(), but I was hoping to get away from some of the:

var myDiv = document.createElement('div'); var link = document.createElement('a'); link.setAttribute('href', 'somepage.php'); var text = document.createCreateTextNode('Link Name');

link.appendChild(text); myDiv.appendChild(link);

in lieu of rjs goodness like: myElement = "<div><a href='somepage.php'>Link Name</a></div>" page.replace_html :elementId, myElement

Any help appreciated

krunk- wrote:

Setup:

A form which initially has only one field: a 2x group of radio_buttons. As the user selects options, additinal fields are added or removed.

I started with observe_field. I was getting some very peculiar behavior from observe_field and finally figured out why =>

Observe field only works for the first click. So it's not suitable for a form that reacts to user input since a user may select/unselect an option multiple times.

Next, I decided to use observe_form. At first, it seemed to overcome the problems of observe_field and reacted to every click of the radio_button. But then I discovered that it doesn't observe changes in fields that are not in the original source (the fields added by the user). So I'm back to ground zero.

I suppose I could build all the DOM objects from scratch and roll my own functions for adding/removing and call them via onclick(), but I was hoping to get away from some of the:

var myDiv = document.createElement('div'); var link = document.createElement('a'); link.setAttribute('href', 'somepage.php'); var text = document.createCreateTextNode('Link Name');

link.appendChild(text); myDiv.appendChild(link);

in lieu of rjs goodness like: myElement = "<div><a href='somepage.php'>Link Name</a></div>" page.replace_html :elementId, myElement

Any help appreciated

You can get around the limitations of the observe_form by stopping the observer just before modifying the form and then restarting it again after inserting the new elements.

_Kevin

_Kevin wrote:

krunk- wrote: > Setup: > > A form which initially has only one field: a 2x group of radio_buttons. > As the user selects options, additinal fields are added or removed. > > I started with observe_field. I was getting some very peculiar behavior > from observe_field and finally figured out why => > > Observe field only works for the first click. So it's not suitable for > a form that reacts to user input since a user may select/unselect an > option multiple times. > > Next, I decided to use observe_form. At first, it seemed to overcome > the problems of observe_field and reacted to every click of the > radio_button. But then I discovered that it doesn't observe changes in > fields that are not in the original source (the fields added by the > user). So I'm back to ground zero. > > I suppose I could build all the DOM objects from scratch and roll my > own functions for adding/removing and call them via onclick(), but I > was hoping to get away from some of the: > > var myDiv = document.createElement('div'); > var link = document.createElement('a'); > link.setAttribute('href', 'somepage.php'); > var text = document.createCreateTextNode('Link Name'); > > link.appendChild(text); > myDiv.appendChild(link); > > in lieu of rjs goodness like: > myElement = "<div><a href='somepage.php'>Link Name</a></div>" > page.replace_html :elementId, myElement > > > Any help appreciated

You can get around the limitations of the observe_form by stopping the observer just before modifying the form and then restarting it again after inserting the new elements.

_Kevin

Thank you, Kevin.

After some googling, mailing list searching, etc. I found two vague references to functions that might be appropriate here: Event.stop() and stopObserving(). I'm not completely sure how to use either of these.

I went to scriptaculous and read the description of stopObserving:

Event.stopObserving(element, name, observer, [useCapture]);

I looked at my page source and got:

new Form.EventObserver('process_call_form', function(element, value) {new Ajax.Request('/rails/assistant/add_element', {asynchronous:true, evalScripts:true, parameters:'Form.serialize(process_call_form)=' + value})})

As the observer method.

Now, element I would assume to be the id of the observed object (process_call_form). Name doesn't seem to have a direct correlation.

From the scriptaculous example, I think it is the action that is being

observed. I also assume that in the case of observe_form it's change.

So that gives me: Event.stopObserving('process_call_form', 'change', observer);

My guess for observer in this case would be: Form.EventObserver. But I'm not sure.

And lastly, once the event has been stopped....how do you restart it?

-james

I'll give this a little bump. I tried to pick a very simple case to test out rails javascript abstraction.

Hi James,

krunk wrote:

Observe field only works for the first click.

Could you say more about what you mean by 'for the first click' and what you saw that caused you to come to this conclusion?

So it's not suitable for a form that reacts to user input since a user may select/unselect an option multiple times.

I'm using observe_field on check_box fields to trigger rjs updates and having no problem with multiple select/unselect actions. Might be able to help if you provide some additional info.

Best regards, Bill

Bill Walton wrote:

Hi James,

krunk wrote: > Observe field only works for the first click.

Could you say more about what you mean by 'for the first click' and what you saw that caused you to come to this conclusion?

> So it's not suitable for a form that reacts to > user input since a user may select/unselect an > option multiple times.

I'm using observe_field on check_box fields to trigger rjs updates and having no problem with multiple select/unselect actions. Might be able to help if you provide some additional info.

Best regards, Bill

Sure, the one click is for radio_buttons only.

Here you go: http://www.thoughtstoblog.com/articles/2006/10/27/observe_field-with-radio-buttons