1

hope y'all doing well ! That's a Ruby on Rails and Javascript Stimulus topic : I'm currently having trouble with a Stimulus controller. I have blog posts (represented by cards) on an index, the cards divs are "generated" from a "each_with_index" iteration but I don't know how to actually use those indexes and pass them to my Stimulus controller.

The goal here is to click on the meatballs menu (three-dots menu) situated on the top right of each card so as to toggle the div with the "meatballs-menu" class.

The problem is that when I click on these dots of each card, it always toggle the div but only on the first same card ! Even if I click on the 10th ! That's why I need to pass my indexes to my Stimulus and make it interact with the right card.

Here is my /index.html.erb :

<div class="post-cards">
      <% @posts.reverse.each_with_index do |post, index| %>
        <div class="post-card">
          <%= cl_image_tag post.photo.key, class: "post-photo" %>
          <div class="icons">
            <a href="#" data-action="click->meatballs#toggleMenu">
              <i class="fa-solid fa-ellipsis-v"></i>
            </a>
            <div class="meatballs-menu" data-meatballs-target="menu" hidden>
              <%= link_to post_path(post), data: { turbo_method: :delete, turbo_confirm: 'Voulez-vous vraiment supprimer cet article ?' } do %>
                <i class="fa-solid fa-trash"></i> Supprimer
              <% end %>
              <%= link_to edit_post_path(post), data: { turbo_method: :edit } do %>
                <i class="fa-solid fa-edit"></i> Modifier
              <% end %>
            </div>
          </div>
          <div class="post-card-content">
            <h2><%= post.title %></li></h2>
            <p><%= post.description %></p>
            <p>Posté le <%= post.created_at.strftime("%d/%m/%Y") %></p>
          </div>
        </div>
      <% end %>
    </div>

And here is my Stimulus controller :

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="meatballs"
export default class extends Controller {
  static targets = [ "menu" ]

  toggleMenu(event) {
    event.preventDefault()
    this.menuTarget.toggleAttribute("hidden")
  }
}

Anyone ? Thanks !

Henny Pop
  • 11
  • 1
  • 1
    This isn't directly tied to your issue the hamburger method but `data: { turbo_method: :edit }` is very broken. Edit is not a [HTTP request method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). Edit in [Rails flavor rest](https://guides.rubyonrails.org/routing.html#crud-verbs-and-actions) is just an endpoint that renders the form for editing a resource and which responds to GET - which is exactly what links do when you don't mess with them. – max Mar 20 '23 at 17:32
  • if you use `event.target` inside your Stimulus controller action `toggleMenu`, then you can discriminate between all the different cards. Then instead of having a static target you get a dynamic target. – Maxence Mar 20 '23 at 20:57
  • Thank you @Maxence ! event.target worked fine. And @max , About the `data: { turbo_method: edit }`, not sure my `link_to` will understand by himself that it has to hit the edit method in my `posts_controller`. But as a novice, I'm just not sure I understood your point...Thank you guys for your help – Henny Pop Mar 22 '23 at 11:12
  • A method is the HTTP verb : POST, GET, PATCH, DELETE. When you type an address :`http://localhost:3000/cards` in the navbar it will use GET by default. Every `edit` method is a `get`, so you don't need to precise the method. Also `edit` is not from the above methods. POST, DELETE and PATCH are used for methods that will persist or delete data in database. They are used in forms as using POST rather than GET in a form allows to not expose the params of the form in the navbar. – Maxence Mar 22 '23 at 11:41

0 Answers0