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?
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.
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 ...
}
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.
Instead, it should be:
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.
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?
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?
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:
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
You make want to check the code here, thanks.
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' } }