ewanchic PRO said about 3 years ago on Building a Questionnaire :
nested_form_controller.js is in the wrong location. In the Show Notes tab, you have it listed as:

# app/assets/javascripts/nested_form_controller.js

Instead, it should be:
# app/assets/javascripts/controllers/nested_form_controller.js







David Kimura PRO said about 3 years ago on Building a Questionnaire :
  Thanks for the catch. I've updated the show notes to reflect this.

Tom PRO said almost 3 years ago on Building a Questionnaire :
Hi,

Having an annoying issue on this one - it looks like adding multiple answers to a question when creating a new questionnaire causes only the last answer to be accepted (only shows one in the dev log in the request too),  but it works fine when editing an existing questionnaire. It looks like 'Add answer' is creating multiple of the same block of HTML when creating a new questionnaire, i.e. 

var content = this.templateTarget.innerHTML.replace(/TEMPLATE_RECORD/g, new Date().getTime())

in nested_form_controller.js appears not to be working correctly (I think) - even when directly copy/pasting from the code blocks above, but only for new questionnaires. Any ideas?

David Kimura PRO said almost 3 years ago on Building a Questionnaire :
It’s addressed in the next episode in dealing with nested attributes within nested attributes 

Nate said over 2 years ago on Building a Questionnaire :
Hi David! I'm wondering what would you suggest doing in the case that I would like to render the same

<%= form.text_field :name, placeholder: 'Answer', class: 'form-control' %>

answer field in the long answer div i.e

  <div data-controller="nested-form" data-dynamic-select-target='long'>
     <%= form.fields_for :answers, Answer.new do |answer| %>
       <%= answer.text_field :name, placeholder: 'Answer', class: 'form-control' %>
      <% end %>
  </div>

I've played with this, but this keeps causing problems since it will submit answer the form everytime with one empty field also. Any suggestions?

Nate said over 2 years ago on Building a Questionnaire :
I'm having a bit of trouble understanding how can you place anything related to the form under the long target as this will always submit empty data form either of the form since other one of them is just hidden not removed from the DOM.

Kam kara said over 1 year ago on Building a Questionnaire :
I look You're put *nested_form_controller.js and dynamic_select_controller.js  in javascript folder on assets/javascripts/controllers

I think in rails 7, all JS codes is locking in Javascrip/controller (I don't kwon if good way to rebuild this project).

I ask this question because since yesterday, I can't get the question to work, but the Questionnaire is created without any problem.
I suspect my Hotwire configuration

Note: I added Hotwire via commands:
bundle add hotwire-rails && rails hotwire:install

To be sure, I even copied and pasted the project following the guide.
Are there any specific changes for rails 7?
Or maybe I missed something. But I don't have any errors in the console either


Update:
Normally I would delete my question, but I think some people will be in the same trap if they are not careful.
In rails 7 the stimulus code is written after extending the default controller... and is different in rails 6 
see an example:
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
.... your code here ...
}

peace

officialklashed said over 1 year ago on Building a Questionnaire :
Question type not working in rails 7

Kam kara said over 1 year ago on Building a Questionnaire :
  officialklashed  can I see your Questionnaire /form and  2 files Js?

officialklashed said over 1 year ago on Building a Questionnaire :
  Kam kara My issue is that when I click on the "Long answer" option in the form, It doesn't remove the question field as it did in the video.
You make want to check the code here, thanks.

officialklashed said over 1 year ago on Building a Questionnaire :
  Kam kara  
app/views/questionnaires/_form.html.erb
<%= form_with(model: questionnaire) do |form| %>
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div data-controller="nested-form">
    <template data-nested-form-target='template'>
      <%= form.fields_for :questions, Question.new, child_index: 'TEMPLATE_RECORD' do |question| %>
        <%= render 'question_fields', form: question %>
      <% end %>
    </template>

    <%= form.fields_for :questions do |question| %>
      <%= render 'question_fields', form: question %>
    <% end %>

    <div data-nested-form-target="add_item">
      <%= link_to "Add Question", "#", data: { action: "nested-form#add_association" } %>
    </div>
  </div>


  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

app/javascript/controllers/dynamic_select_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["select", "choice", "long"]

  connect() {
    this.selected()
  }

  selected() {
    this.hideFields()
    switch (this.selectTarget.value) {
      case 'single_choice':
        this.choiceTarget.classList.remove('hidden')
        break;
      case 'multiple_choice':
        this.choiceTarget.classList.remove('hidden')
        break;
      case 'long_answer':
        this.longTarget.classList.remove('hidden')
        break;
    }
  }

  hideFields() {
    this.choiceTarget.classList.add('hidden')
    this.longTarget.classList.add('hidden')
  }
}

app/javascript/controllers/nested_form_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["add_item", "template"]

  add_association(event) {
    event.preventDefault()
    var content = this.templateTarget.innerHTML.replace(/TEMPLATE_RECORD/g, new Date().valueOf())
    this.add_itemTarget.insertAdjacentHTML('beforebegin', content)
  }

  remove_association(event) {
    event.preventDefault()
    let item = event.target.closest(".nested-fields")
    item.querySelector("input[name*='_destroy']").value = 1
    item.style.display = 'none'
  }
}

Pipo Hamilton PRO said 5 months ago on Building a Questionnaire :
Hi, I have a case that comes quite often, and I am not sure how to adapt the tutorial from your code to handle it. In case of multiple choice question, i would like to add "Other" where the user can manually add a response that is not available in my set of responses. Is there a way to do that using this code?

Login to Comment