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.

Answer 1

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