Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

turbo_stream.remove not removing entity #50

Closed
tgturner opened this issue Dec 28, 2020 · 4 comments
Closed

turbo_stream.remove not removing entity #50

tgturner opened this issue Dec 28, 2020 · 4 comments

Comments

@tgturner
Copy link

I'm trying to get started with turbo-rails. I am attempting to create a small sample application and ran into a problem, I can't seem to get turbo_stream.remove to actually remove an item from my html.

The key bits are below

I have the following in my index.html.erb:

<div id="users">
  <%= render @users %>
</div>

the user (_user.html.erb) partial looks like this:

<%= turbo_frame_tag dom_id(user) do %>
  <p data-controller="users">
    <strong>Username:</strong>
    <%= user.username %>

    <input data-users-target="id" value="<%= user.id %>" type="hidden" >
    <%= link_to 'Edit', edit_user_path(user) %> |
    <%= link_to 'Delete', "#", data: { action: "click->users#destroy" } %>
  </p>
<% end %>

Because turbo-rails doesn't currently support data-method, I have the following piece of code in my stimulus controller to handle the delete link:

destroy() {
    const token = document.querySelector('[name=csrf-token]').content

    fetch('/users/' + this.idTarget.value, {
      method: 'DELETE',
      headers: {
        'X-Csrf-Token': token,
        "Accept": "text/html; turbo-stream, text/html, application/xhtml+xml",
        "Turbo-Frame": "users"
      }
    })
  }

My destroy action looks like this:

  def destroy
    @user.destroy
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to users_url, notice: 'User was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

and my destroy.turbo_stream.erb looks like this

<%= turbo_stream.remove @user %>

I can see that the turbo_stream template gets rendered when the DELETE call is made by looking at the rails server logs, but but the html is never updated, and I can't quite understand what I'm missing (or maybe this use case isn't supported).

Another curious bit is that if I look at the network tab, the request returns a 200 but the response body is blank for the call. If I follow the request through rack and rails middleware, I can see the body being set correctly, so I have no idea where it is getting dropped.

Should this work? Or have I missed something completely obvious?

Here is a link to the example app if that would be helpful: https://github.com/tgturner/diceroll

@j-sieg
Copy link

j-sieg commented Dec 28, 2020

I think you can get it to work if you remove the stimulus controller and just use
<%= button_to 'Delete', user_path(user), method: :delete %>

@dhh
Copy link
Member

dhh commented Dec 28, 2020

By doing a remote link that's triggering a fetch outside of Turbo, you're not going to be sending an Accept header that includes turbo stream. So you'll be hitting either the html or json formats. What @j-sieg said is the way to go. It's better for a11y to use real forms for actions anyway.

@dhh dhh closed this as completed Dec 28, 2020
@bborn
Copy link

bborn commented Dec 28, 2020

Is a head :ok the right thing for the server to respond with here? If so, would it make sense for turbo-rails to provide a default? Otherwise, if you do this:

def destroy
  def destroy
    @message = Message.find(params[:id])
    @message.destroy

    respond_to do |format|
      format.turbo_stream 
    end
  end

Then you have to provide a blank destroy.turbo_stream.erb to avoid getting a missing template error.

@dhh
Copy link
Member

dhh commented Dec 28, 2020

Yeah, going to come up with a way to fix this. Right now you do need that empty response. You can also do { render turbo_stream: "" }. But it's ugly as well. We'll find a better way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants