Issue with inline-form from stimulus twitter example
I have a rails 5.1 app that I am working the stimulus twitter example into. Instead of tweets they are going to be comments. The comments are linked to servicerequests. So on the servicerequest/show page I display the comments. Everything is working until the inline-edit#toggle function. When I click the content text field of the comment the toggle class works for the the text field, but does not toggle the removal of the "hidden" class and the form never displays. Here is what I have:
Form
Form
<%= form_for([@servicerequest, @comment || @servicerequest.comments.build], remote: true, class: local_assigns[:class],
data: {target: "inline-edit.form"}) do |f| %>
<div>
<%= error_messages_for(f.object) %>
</div>
<div>
<%= f.text_area :content, class: 'form-control', autofocus: true %>
</div>
<div style="padding-top:20px;">
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>_comments partial:
<div class="feed-element" id="<%= dom_id(comment) %>" data-controller="inline-edit">
<div class="media-body" style="font-size:14px;">
<span class="pull-right text-navy"><%= time_ago_in_words(comment.updated_at) %> ago</span>
<strong><%= comment.user.username %></strong> updated this service request.
<br>
<small class="text-muted"><%= @servicerequest.created_at.to_time.strftime('%B %e at %l:%M %p') %></small>
<div class="well" style="font-size:14px;">
<div data-target="inline-edit.content" data-action="click->inline-edit#toggle"><%= comment.content.html_safe %></div>
<% render "comments/form", comment: comment, class: "hidden" %>
<% if current_user.username == comment.user.username %>
<div class="actions">
<%= link_to "Edit", edit_servicerequest_comment_path(comment.servicerequest, comment), :remote => true, class: 'btn btn-xs btn-primary' %>
<%= link_to "Delete", [@servicerequest, comment] , method: :delete, :remote => true, data: { confirm: 'Are you sure?' }, class: 'btn btn-xs btn-outline btn-inverse' %>
</div>
<% end %>
</div>
</div>
</div>within servicerequests/show:
<%= render 'comments/form', comment: @comment, class: "hidden" %> <div id="commentdiv"> <%= render @comments %> </div>
inline_edit_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "content", "form" ]
toggle() {
this.contentTarget.classList.add("hidden")
this.formTarget.classList.remove("hidden")
}
}Any ideas on why the content field hides when toggled but the form never appears?
You called your action `toggle`, but it's not actually one of the short-hand actions in [Stimulus](https://stimulusjs.org/handbook/building-something-real#common-events-have-a-shorthand-action-notation).
You can try this, which should work I think:
You can try this, which should work I think:
toggle() {
this.contentTarget.classList.toggle("hidden")
this.formTarget.classList.toggle("hidden")
}It will look for the hidden class, if found, "remove" it and otherwise "add" it.
Thanks for the info! Good to know. So changing it your suggested method now produces this error:
Error: Missing target element "inline-edit.form"
I've been running into issue when using hyphens in the controller or target name and not 100% sure about the issue or fix—could try camelCase or try to you a controller name without hyphens.
Changed it to camel case and still get the same error. This is bizarre.
Error: Missing target element "inlineEdit.form"