dynamic form problem

I have a form that when a user changes a selection field 'data_fmt'
to a certain value, then a different selection 'data_level' has a
different set of available selections drop downs and a check box field
may appear or disappear depending on the selection in 'data_fmt'.

I like to use form_remote_tag so that when there was an error, I just
display an alert() message. In the above scenario however, I thought
of using observe_field and having div tags which have
style='display:none' and making them appear or disappear as needed,
but it seems like that approach may not work inside of a form ?

If I use observe_form and try to re render the form every time it
changes, it works pretty good except when the user starts to enter
text in a text field, the re render causes the focus on that field to
be lost. It seems maybe I just need to figure out how to re set the
focus unless this problem has a better approach ..

A similar approach using observe_field causes some of the text fields
to lose their values on re render.

Actually, the problem with re rendering the form and setting the
focus is knowing what the focus was before observe_form sent the
request to the server. The most obvious hack way is to keep the form
values in a session and see which one changed since the last time.
That might work if the duration is set low enough because a fast typer
can change more than one field in under a second etc.

I'd think the most obvious would be to have each focus() event save
the target element's id to a single global variable, and use that value
to reset the focus afterwards.

Just a thought.

Since I rerender the form using ajax, I am not sure if
document.myform.myfield.focus() will work and I have not had any luck.
Is there a way to focus through RJS ?

The best approach I can think of is to get rid of the form and have a
field observer for each field, save the values in a session and when
the user clicks the save button, I treat it as if it was a form
submit. I'm not so much of a web expert on these kinds of things and I
end up doing whatever I can make sense of if I can't find a decent
example someplace ..

Hi Jedrin,

That seems to work, thanks alot, things are looking a little better
now.

I don't suppose there is any easy way to tell what the focus was when
observe_form sends the call to the server ?
Right now I just keep the fields in a session and see which one
changed, which is sort of a hack and prone to slight errors etc .

Uh, the suggestion in my previous message? :slight_smile:

I didn't quite understand what you meant.

However, this whole approach is having numerous problems, though I
did get an rjs focus to work. I'm not sure if it's because there is a
table inside the form, but the basic thing is I want to change form
fields using ajax. If you have a some text fields and some selects
like say:

<%= select_tag :data_format, options_for_select
(['t1','b1','ascii'],@fmt) %>

<%= select_tag 'transaction[level]', options_for_select
(['','level-1','level-2'], level)

If you select ascii, I want to dynamically change the transaction
[level] select to be a different set of selections through an
observer. and then add a checkbox:

<%= check_box_tag 'transaction[EOG]', eog, checked %>

It doesn't seem to work that I can update part of a form when there is
a table involved.

If I try to re render the whole form, the current problem is that I
send the data back from the form_observer, but say a user types in an
input field and he types 'abc'. The observer calls the server and
sends 'abc', but after that he types 'xyz'. The server in this
strategy will re render the form, and that field will go back to 'abc'
erasing part of the users input.

When I have tried to just use field observers and save all the fields
in session variables, if I have a button that looks like a submit
button, what sometimes happens is the user can rapidly type something
and hit the submit button and submit will fire before the observer and
it won't submit all of the data.

The page I'm having the problem with seemed like it was working ok
along time ago until someone may have changed it, they may have added
a table. I'm not sure, but it may be the table that is giving me the
trouble.

Maybe what it is is I can't generate any <tr> or <td> tags in my
partial that renders the ajax stuff. If any empty ones I have won't
show as a row until I render into them, maybe that is what I should
try. Having empty <tr> <td> tags in the original and then render into
the inside of them with ajax .. I'm guessing that might solve my
problem ..

I can't see the presence or absence of a table being relevant unless
you're creating mal-formed markup with your AJAX results. In which
case all bets are off :slight_smile:

Are you using Firebug? If not, stop, get it, use it.

And it would be useful if you either posted the app somewhere public
or created a downloadable test case that demonstrates the issue.

Empty tags is invalid HTML. Use a non-breaking space &nbsp; or
something similar to make it valid.

<tr>&nbsp;<td>

?? I assumed the OP meant <tr><td></td></tr> "empty" but what
you propose above is totally invalid -- the only children of a TR are
TD or TH. An NBSP is character data, not white-space.

Yeah, typo, I usually do something like

<td>&nbsp;</td>

Are you using Firebug? If not, stop, get it, use it.

And it would be useful if you either posted the app somewhere public
or created a downloadable test case that demonstrates the issue.

I have been using firebug, I thought at times in the past there was a
'break on javascript error' option, but I haven't been able to find it
lately.

I have to apologize because the web app is on an internal web site
and technically I am not allowed to post code publicly.