Ask A Question


You’re not receiving notifications from this thread.

Issue with inline-form from stimulus twitter example

spacerobotTR asked in Javascript
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_for([@servicerequest, @comment ||], remote: true, class: local_assigns[:class],
  data: {target: "inline-edit.form"}) do |f| %>
    <%= error_messages_for(f.object) %>
    <%= f.text_area :content, class: 'form-control', autofocus: true %>
  <div style="padding-top:20px;">
    <%= f.submit class: "btn btn-primary" %>
<% 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.

    <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'  %>
      <% end %>


within servicerequests/show: 

<%= render 'comments/form', comment: @comment, class: "hidden" %>

<div id="commentdiv">
<%= render @comments %>


import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "content", "form" ]

  toggle() {

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]( 

You can try this, which should work I think:

toggle() {
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"

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 84,111+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.