ewanchic said over 1 year 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 over 1 year ago on Building a Questionnaire :
  Thanks for the catch. I've updated the show notes to reflect this.

Tom PRO said over 1 year 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 over 1 year ago on Building a Questionnaire :
It’s addressed in the next episode in dealing with nested attributes within nested attributes 

Nate PRO said about 1 year 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 PRO said 12 months 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 4 months 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 3 months ago on Building a Questionnaire :
Question type not working in rails 7

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

officialklashed said 3 months 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 3 months 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'
  }
}

Login to Comment