Missing target element error

1

I am trying to have a div display the contents of a comment. Then when you click on the comment you can do some inline editing of the text via a form field. I am hiding the form and display the comment when the page loads. When you click on the comment I want to hide the comment and display the form.

When I click on the comment I get this error:

Error: Missing target element "inlineEdit.form"

Here is my form:

    <%= form_for([@servicerequest, @comment || @servicerequest.comments.build], remote: true, class: local_assigns[:class],
      data: {target: "inlineEdit.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 %>

This is my comment partial:

    <div class="feed-element" id="<%= dom_id(comment) %>" data-controller="inlineEdit">

      <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="inlineEdit.content" data-action="click->inlineEdit#toggle"><%= comment.content.html_safe %></div>

          <% render "comments/form", comment: comment, class: "d-none" %>

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

This is inlineEdit_controller.js

    import { Controller } from "stimulus"

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

      toggle() {
          this.contentTarget.classList.toggle("d-none")
          this.formTarget.classList.toggle("d-none")
        }
    }

Any ideas why I am getting the error that the form target element is missing?

2

You need to reference your controllers in HTML with dashes (-) for Stimulus to pick them up. For example, instead of saying data: { target: 'inlineEdit.form' }, you would write data: { target: 'inline-edit.form' }.

Try that and see if the issue is resolved! If not, make sure to verify in your development console that the element on the page actually does have the data attribute when it is rendered.

3

Thanks I actually had it that way at first. I get the same error. Here is what I see in the console

Console Image

4

Interesting. When you right click a comment on your page and “Inspect”, does the HTML that the page is rendering look the way you’d expect? Is the form actually there, and does it have the data-target attribute correctly set?

5

Ok I got it working. For some reason if I render a form partial within another partial it doesn’t work (for me at least). I included the whole form in the _comment partial and it is now working. Thanks for the help with this!

1 Like
6

I don’t remember exactly if I have a similar scenario as your but in my attempt to do a TodoMvc in stimulus, I did use a lot of rails partials and never had any issues with them.

7

Thanks. I’m wondering if it is because I am rendering the partials within a different model. In servicerequests/show I am rendering comments/form and comments/comment.

Your todo app looks like it is just one model for todos. If you had todo lists and todo items I think it would be similar to what I was doing maybe?