Posts [ 1 to 20 of 28 ]

Topic: Dynamically creating form fields

I'm writing an application which stores people. People can have a number of addresses.

I'd like to have a form whereby clicking on a button ('Add address' say) would create some extra fields for a new address to be added.

Ideally the address would be submitted using AJAX then added to a list of existing addresses on the form. This list would have 'Edit' and 'Delete' buttons next to the entries so they be altered. Deleting would also be handled by and AJAX request.

Does anyone know any good examples for this sort of behaviour? Can anyone offer some pointers as to how this can be achieved?

Re: Dynamically creating form fields

I have done this a couple times in the past. I recommend creating an Addresses controller. You can then use link_to_remote to call new, edit, and destroy on the addresses controller. The action can return the proper response/partial and update the proper divs.

Re: Dynamically creating form fields

ryanb wrote:

I have done this a couple times in the past. I recommend creating an Addresses controller. You can then use link_to_remote to call new, edit, and destroy on the addresses controller. The action can return the proper response/partial and update the proper divs.

I may write a tutorial on this and go into more detail.

I have an Addresses controller so I can call these methods. It's the first time I've done anything like this so I'm trying to sort out how it will work in my head.

Re: Dynamically creating form fields

- If I wrote some JavaScript that created the new form fields would I be able to use this? Or is there a better way? Prototype maybe?

You can do this completely without writing a line of JavaScript using rails helpers and prototype (link_to_remote for example). You may need to use RJS as well.

mip wrote:

- If this addresses section of the form is submitted separately to the rest of the form will the 'Save' button fire off some JavaScript as opposed to submitting the form?

If you use form_remote_tag it will send the form through JavaScript.

mip wrote:

- Will the new, edit, and destroy actions be the same as those in a non-AJAX environment accept that they will return some HTML for between the relevant divs?

They will be a little different depending upon how you do it. For example, you may want to only render a partial in the new and edit actions. You will also want to reload the addresses div inside the create/update/destroy actions instead of redirecting.

mip wrote:

- Do you know of any example code anywhere on the web? Something simple to get me started would be great.

Not off the top of my head. I would look for AJAX/RJS Rails specific tutorials. Most of the tutorials do something similar to what you are attempting to do from what I've seen.

Re: Dynamically creating form fields

Re: Dynamically creating form fields

The significant difference is the tutorial shows you how to do everything in one form. Your solution will be simpler because you don't need to do it in one form. You can just list the addresses and use link_to_remote for removing, editing, and adding addresses.

Also, the tutorial only shows creating, not editing/removing existing models.

Re: Dynamically creating form fields

ryanb wrote:

The significant difference is the tutorial shows you how to do everything in one form. Your solution will be simpler because you don't need to do it in one form. You can just list the addresses and use link_to_remote for removing, editing, and adding addresses.

I understand how I use link_to_remote to get the extra part of the form (I have this working) but how do I use it to submit the extra fields independently of the main form?

I have an "Add address" link which uses link_to_remote to put the following between some div tags:

Re: Dynamically creating form fields

Sorry, I think I misunderstood your original problem. I assumed you were adding addresses on the Person's Show page (where there isn't already a form). But, if you want to add addresses while editing/creating a person (where there is already a form) then yes, the article I wrote will be what you want. Right now it only handles creation, but I plan to write one up which can create/edit addresses while editing the person as well.

How it handles the form submission problem is it submits all data (address and person fields) at once in one big form then sorts it all out in the resulting action, so there's no need to submit data independently.

Re: Dynamically creating form fields

ryanb wrote:

Sorry, I think I misunderstood your original problem. I assumed you were adding addresses on the Person's Show page (where there isn't already a form). But, if you want to add addresses while editing/creating a person (where there is already a form) then yes, the article I wrote will be what you want. Right now it only handles creation, but I plan to write one up which can create/edit addresses while editing the person as well.

Thank ryan. Yep that's what I want.

ryanb wrote:

How it handles the form submission problem is it submits all data (address and person fields) at once in one big form then sorts it all out in the resulting action, so there's no need to submit data independently.

The problem is that I really need to do this submission independently. Once a new address is created I add it to a list so the user can select the persons preferred address. I have that bit working it's creating the new address which is causing me the problems.

Re: Dynamically creating form fields

Are you including this form_remote_tag in an already existing form? HTML doesn't allow nested forms. Instead I suggest placing it outside (below/above) the person form. Then it should submit properly with only those fields.

Re: Dynamically creating form fields

ryanb wrote:

Are you including this form_remote_tag in an already existing form? HTML doesn't allow nested forms. Instead I suggest placing it outside (below/above) the person form. Then it should submit properly with only those fields.

Re: Dynamically creating form fields

As for what goes in the action you need to create the address based on the fields:

@address = Address.create(params[:address])

Then place the addresses in a partial and render that. This will replace the content of the div with the partial.

render :partial => 'addresses', :layout => false

Edit: Oh, looks like you're pretty much doing this already. You can set the person_id as a hidden field in the address form. Or you can build it as you are doing in your previous post. Either way should work.