Встроенное редактирование в Rails 7 turbo_frame Ответ не имеет соответствующего турбо-кадра

Здравствуйте, у меня есть приложение rails 7, в котором я хочу встроенно отредактировать элемент действия, и в турбо-кадре action_item.status я получаю эту ошибкуResponse has no matching <turbo-frame id="status_action_item_8c36e8a6-70a5-4417-864b-198788f984b3"> element

У меня есть несколько одинаковых фреймов (разные domID), у которых нет проблем.

Я следил за отличным турбо-контентом от gorails и hotrails , и это действительно озадачивает меня, я надеюсь, что я близок, и ему просто нужно присмотреться.

Индекс

      <div class="row justify-content-center">
  <div class="col-12">
    <div class="card shadow border-dark border-2 rounded-2">
      <div class="card-header bg-dark border-secondary border-bottom border-2 d-flex justify-content-between align-items-center">
        <div class="dropdown">
          <button class="btn btn-lg btn-outline-light dropdown-toggle float-start" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" target="_top">
            Incomplete Tasks
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><%= link_to "Completed Tasks", completed_action_items_path, class: "dropdown-item"%></li>
            <li><%= link_to "In Progress Tasks", in_progress_action_items_path, class: "dropdown-item"%></li>
          </ul>
        </div>
          <%= link_to new_action_item_path, class: 'btn btn-outline-light float-end m-2' do %>
            +
          <% end %>
      </div>
      <div class="card-body m-0 p-0">
        <div class="table-responsive">
          <table class="table table-hover table-borderless m-0 p-0 align-middle">
            <thead>
            <tr class="table-dark">
              <th style="width: 3%"></th>
              <th class="" style="width: 30%"><span class="m-2">Name</span></th>
              <th class="d-none d-md-table-cell" style="width: 27%"><span class="m-2">Meeting</span></th>
              <th class="text-center" style="width: 10%"><span class="m-2">Status</span></th>
              <th class="text-center d-none d-md-table-cell" style="width: 5%"><span class="m-2">Priority</span></th>
              <th class="text-center" style="width: 5%"><span class="m-2">Due</span></th>
              <th class="text-center" style="width: 10%"><span class="m-2">Actions</span></th>

            </tr>
            </thead>

            <tbody>
            <% @action_items.each do |action_item| %>
              <tr>                
                <td>
                  <button class="btn btn-sm btn-outline-success rounded-3 border-0 float-end me-1"
                          type="button"
                          data-bs-toggle="tooltip"
                          data-bs-placement="top"
                          data-bs-custom-class="custom-tooltip"
                          title="Complete task"
                  >
                    <i class="fas fa-check-circle text-success hide"></i>
                  </button>
                </td>

                <td class=""><small class="ms-2"><%= link_to action_item.name, action_item, class: "text-decoration-none text-dark" %></small></td>
                <td class="d-none d-md-table-cell"><small class=""><%= action_item.meeting.name %></small></td>
                <%= render 'status', action_item: action_item %>
                <%= render 'priority', action_item: action_item %>
                <%= render 'due', action_item: action_item %>
                <%= render 'actions', action_item: action_item %>
              </tr>
            <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Статус Частичный

      <td class="text-center">
  <small class="">
    <% frame_id = dom_id(action_item, "status") %>
    <%= form_with model: action_item, class: '', data: { turbo_frame: frame_id } do %>
      <%= turbo_frame_tag frame_id, class: 'inline-edit' do %>
        <%= status_method(action_item) %>
      <% end %>
    <% end %>
  </small>
</td>

Форма

      <%= form_with(model: action_item) do |form| %>
  <% if action_item.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(action_item.errors.count, "error") %> prohibited this action_item from being saved:</h2>

      <ul>
      <% action_item.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="mb-3">
    <% frame_id = dom_id(action_item, "name_turbo_frame") %>
    <%= turbo_frame_tag frame_id do %>
      <div class="input-group">
        <%= form.text_field :name, class: 'form-control mw-100', placeholder: 'Description' %>
        <%= form.button class: "btn btn-dark inline-action" do  %>
          <i class="fa-regular fa-floppy-disk"></i>
        <% end %>
      </div>
    <% end %>
    </div>
    <% if @Meeting.present? %>
      <%= form.hidden_field :meeting_id, value: @meeting.id %>
    <% end %>
    <% frame_id = dom_id(action_item, "attendee_turbo_frame") %>
    <%= turbo_frame_tag frame_id do %>
      <% if @action_item.meeting.present? %>
        <div class="input-group">
          <%= form.select :attendee_id, action_item.meeting.attendees.all.map { |p| [ p.user.email, p.id ] }, { include_blank: true}, { class: 'form-select' } %>
          <%= form.button class: "btn btn-dark inline-action" do  %>
            <i class="fa-regular fa-floppy-disk"></i>
          <% end %>
          <%= form.hidden_field :status, value: "assigned" %>'
        </div>
      <% end %>
    <% end %>
  <div class="mb-3">
    <% frame_id = dom_id(action_item, "action_item_priority_turbo_frame") %>
    <%= turbo_frame_tag frame_id do %>
      <div class="input-group">
        <%= form.select(:priority, ActionItem.priorities.keys.map { |priority| [priority.titleize, priority]}, { include_blank: "Priority" }, { class: 'form-select' }) %>
        <%= form.button class: "btn btn-dark inline-action" do  %>
          <i class="fa-regular fa-floppy-disk"></i>
        <% end %>
      </div>
    <% end %>
  </div>
  <div class="mb-3">
    <% frame_id = dom_id(action_item, "status") %>
    <%= turbo_frame_tag frame_id do %>
      <div class="input-group">
        <%= form.select(:status, ActionItem.statuses.keys.map { |status| [status.titleize, status]}, { include_blank: "Status" }, { class: 'form-select'}) %>
        <%= form.button class: "btn btn-dark inline-action" do  %>
          <i class="fa-regular fa-floppy-disk"></i>
        <% end %>
      </div>
    <% end %>
  </div>

  <div class="mb-3">
    <% frame_id = dom_id(action_item, "action_item_due_date_turbo_frame") %>
    <%= turbo_frame_tag frame_id do %>
      <div class="input-group">
        <%= form.date_field :due, class: 'form-control' %>
          <%= form.button class: "btn btn-dark inline-action" do  %>
            <i class="fa-regular fa-floppy-disk"></i>
          <% end %>
      </div>
    <% end %>
  </div>
  <div class="mb-3">
    <% if action_item.persisted? %>
      <div class="float-end">
        <%= link_to 'Destroy', action_item, method: :delete, class: "text-danger", data: { confirm: 'Are you sure?' } %>
      </div>
    <% end %>

    <%= form.submit class: 'btn btn-primary' %>

    <% if action_item.persisted? %>
      <%= link_to "Cancel", action_item, class: "btn btn-link" %>
    <% else %>
      <%= link_to "Cancel", action_items_path, class: "btn btn-link" %>
    <% end %>
  </div>
<% end %>

ActionItemsHelper

        def status_method(action_item)
    if action_item.status.present?
      link_to action_item.status.titleize, edit_action_item_path(action_item), class: "btn btn-sm btn-outline-dark border-0"
    else
      link_to edit_action_item_path(action_item), class: "btn btn-sm btn-outline-dark border-0" do
        content_tag(:i, "", class: ["fas", "fa-traffic-light", "fa-sm"] )
      end
    end
  end

заранее спасибо

0 ответов

Другие вопросы по тегам