Show modal triggered by table td with stimulus

1

Hi, i’m trying to show a modal window ckicking on a table cell, i’ve a working solution but i’m not sure it’s the optimal one, and i do not understant why i can’t use only turbo-frame.

basically i render a turbo-frame within turbo-stream:

# html

<table>
	<tbody data-controller="table"
	     data-table-url-value = "<%= new_path %>">
		<tr>
			<td data-action="click->table#cellClicked">           
				<%= cell_value %>	      
			</td>
	  </tr>
	</tbody>
</table>

#table_controller.js

import {Controller} from "@hotwired/stimulus"
import { get, post, put, patch, destroy } from "@rails/request.js"
export default class extends Controller {
    static values = {url: String};

    connect() {
    }

    async cellClicked(event) {
        const response =  await get(this.urlValue, { headers: {Accept: 'text/vnd.turbo-stream.html'} })

        if (response.ok) {
        }
    }
}

#controller

def new
    respond_to do |format|
      format.html {}
      format.turbo_stream {}
    end
end

#new.turbo_stream.erb

<%= turbo_stream.replace("modal") do %>
  <%= render TurboModalComponent.new(title: "New") do %>

    <%= render partial: "form" %>

  <% end %>
<% end %>

trying to use only turbo-frame, i have the correct response, but the html is not rendered

#table_controller.js

import {Controller} from "@hotwired/stimulus"
import { get, post, put, patch, destroy } from "@rails/request.js"
export default class extends Controller {
    static values = {url: String};

    connect() {
    }

    async cellClicked(event) {
        const response =  await get(this.urlValue, { headers: {responseKind: "turbo-stream", 'turbo-frame': 'modal'} })

        if (response.ok) {
        }
    }
}

#new.html+turbo_frame.erb

<%= render TurboModalComponent.new(title: "New") do %>

  <%= render "form" %>

<% end %>
2

Hey :wave: !

I was facing the same issue, and came up with this solution:

Let me know you thoughts!