Observe_field with dynamic forms


#1

I have a form where I dynamically add form elements based on user input.
An example is that when a user selects a “server” from a select box I
add (via AJAX calls back to server) a “type” select box pre-populated
with valid choices for that server. I do this by using observe_field on
the “server” field and update a div on the page with the new “type”
select box. So far so good. The form submits with all the proper
values.

Now I want to watch the newly added “type” field with observe_field but
it doesn’t work. I never see the callback function specified in
observe_field get called. It seems like since the element didn’t exist
when the page initially loaded the observe_field can’t watch the
element. I also tried updating/adding the observe_field code when I
create the new “type” select box but that also doesn’t work.

I can whip up an example if ppl need to see it in code but it is rather
difficult to extract it cleanly from my current code.


#2

Jason W. wrote:

Now I want to watch the newly added “type” field with observe_field but
it doesn’t work. I never see the callback function specified in
observe_field get called. It seems like since the element didn’t exist
when the page initially loaded the observe_field can’t watch the
element. I also tried updating/adding the observe_field code when I
create the new “type” select box but that also doesn’t work.

Yes, I don’t think observe_field will work if the element does not
exist at the time the observe_field script section is executed.

Your second method of sending the observe field script section together
with (after!) the select should work. Use the Mozilla/Firefox source
browser (Ctrl-U) and DOM inspectors (Ctrl-Shift-I) to make sure what’s
in the document is going to do what you think.

I can whip up an example if ppl need to see it in code but it is rather
difficult to extract it cleanly from my current code.

Yes, you’ll have to post the code for both the initial and AJAX views
if you still can’t get it to work.


We develop, watch us RoR, in numbers too big to ignore.


#3

You could try using hidden fields for every possible observable field
in the div (or whatever) that gets replaced via AJAX. Say you have
three possible HTML pages, where:

  • No server is selected
  • Server 1 is selected
  • Server 2 is selected

Then for “no server selected”, you would put in all the observable
fields for server 1 and server 2 as blank hidden fields. If server 1
is selected, then all the observable fields for server 2 are blank
hidden fields in the returned HTML, and vice-versa for server 2.

It’s sloppy, and I’m not sure it’ll work (it’ll certainly give you
headaches with your observable fields for server 2 when you are move
from that to server 1) but it’s certainly worth a shot.

Dave

On 12/31/05, Mark Reginald J. removed_email_address@domain.invalid wrote:

exist at the time the observe_field script section is executed.
Yes, you’ll have to post the code for both the initial and AJAX views


Site: http://antidis.com/


#4

Mark Reginald J. wrote:

Your second method of sending the observe field script section together
with (after!) the select should work. Use the Mozilla/Firefox source
browser (Ctrl-U) and DOM inspectors (Ctrl-Shift-I) to make sure what’s
in the document is going to do what you think.

But unfortunately the second method doesn’t seem to work.

Mozilla/Firefox view source doesn’t seem to show me the dynamically
updated content. It just shows the initial view of the page. :frowning: This
hampers my debugging quite a bit and I end up running ethereal to see
the code that ajax calls add in.

I’ll write up a sample and post it later today.

Thanks
Jason


#5

You can see the dynamically updated DOM tree with the DOM inspector in
the Web D. Toolbar for Firefox. That should help you.

Dave

On 12/31/05, Jason W. removed_email_address@domain.invalid wrote:


Posted via http://www.ruby-forum.com/.


Rails mailing list
removed_email_address@domain.invalid
http://lists.rubyonrails.org/mailman/listinfo/rails


Site: http://antidis.com/