Adding dynamic fields to nested form through AJAX

Question

I've been watching and reproducing these railscasts on my app: 196-nested-model-form-part-1 and 197-nested-model-form-part-2. I do not yet have a pro account so i can't watch the revised episode.

I'm developing under rails4 (edge) and link_to_function has been deprecated in favor of unobstrusive JS (which is great).

I'll keep the example of the above railscasts (i.e. survey/question). What i'd like to do is to use the question's partial through unobstrusive javascript and i just don't know how and where i should do this.

I was thinking of two ways to do so :

• First way would be to add in my app/assets/javascripts a file surveys.js with the function add_question but i don't see how i could use my partial from here.
• Other way would be to create a new action in my SurveyController that would respond using the question partial but i'm bothered by the fact of having an action specific to questions in my survey controller.

I can't help to think there must be a better way to do this.

Solution 1

I don't have a pro account on Railscasts either, but sometimes it is a good idea to have a look at Ryan's Github account. Oftentimes he develops gems to stuff he covered in his episodes. There you will find this awesome nested_form gem, which does exactly what you want.

Of course you can reinvent the wheel, but I think it is much easier and faster to use Ryan's gem. The documentation explains perfectly how to use it. Have fun!

Solution 2

Did you know about remote links and forms? You can use a remote link here to accomplish what you want.

In your view:

link_to 'Add question', add_question_path(@survey), remote: true

In your controller

def add_question
  @survey = Survey.find(params[:id])

  respond_to do |format|
    format.js #add_question.js.erb
  end
end

The last step is to create a file app/views/surveys/add_question.js.erb

$('#my_survey').append('<%=j render partial: 'my_question_partial' %>')

Don't forget to create a route for your ask_question_path

For more info about remote links and forms see: http://tech.thereq.com/post/17243732577/rails-3-using-link-to-remote-true-with-jquery-ujs

Comments

[Crystark]

Thank you @Charles. I indeed found that nested_form gem but i didn't try it as it requires the use of nested_form_for and i'm already using simple_form. I'm not quite sure i can use both.

[Crystark]

Thank you @Arjan. That's indeed what i meant by creating a new action in my SurveyController but i wasn't quite sure about doing this for the reasons i explained above. Your solution, though, seems clean and dry. Failling to find an other solution, i will probably go for this.

[Dennis Hackethal]

Yes, you can. Just use simple_nested_form_for. Check out this.

[Crystark]

That's what i went for. I know have the pro account so i was able to watch the revised episode.

[Jake Smith]

Looks like the build is currently failing and I don't see support for bootstrap_form_for. Any other suggestions?

[Clam]

why is there a j inside <%=j render partial

[clozach]

@Clam j is an alias for the escape_javascript javascript helper. api.rubyonrails.org/classes/ActionView/Helpers/…

[Ben]

Does it applies for a nested form element ? The form's object has to be passed somewhere. It does not seem to answer what's asked