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?
Thanks for the info! Good to know. So changing it your suggested method now produces this error:
Error: Missing target element "inline-edit.form"
Changed it to camel case and still get the same error. This is bizarre.
Error: Missing target element "inlineEdit.form"