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.