Adding a Stimulus click action to a Turbo link?

Question

I am doing an inline editing feature on the show page with the 'Edit' button above the frame that loads with turbo. Trying to add a toggle on the edit button that it switches to the cancel button in edit mode.

Figured a simple stimulus controller would do the trick except when you add the data-action="click->edit-button#toggle" that overides the turbo action on the button. Thoughts? Ideas?

<div turbo-controller="edit-button">
  <a class="btn btn-sm btn-primary btn-outline" data-turbo-frame="project" data-edit-button-target="button" data-value="show" href="/foobar/234/edit">Edit</a>
  <turbo-frame id="project">
    content
  </turbo-frame>
</div>

Try using a lifecycle event on an `data-action="turbo:submit-end@window->edit-button#toggle`, you probably need some logic to only toggle, when the event was triggered from the button — Roland Studer, Feb 06 '22 at 00:09
Will try that - should not matter - if the form is being submitting it will go back to the show page. The desired action is to toggle the button either way. — Dan Tappin, Feb 07 '22 at 02:00

score 0 · Answer 1 · answered May 16 '22 at 22:57

The simplest solution would be to have a partial with the frame that renders either the edit link and content OR cancel link and edit form, depending on a local var setting. For example:

<turbo-frame id="project">
  <% if local_assigns[:editing] == true %>
    <a href="/foobar/123/cancel">Cancel</a>
    editing form....
  <% else %>
    <a href="/foobar/234/edit">Edit</a>
    content
  <% end %>
</turbo-frame>

This will by default render the content and edit link. In the edit request you just need to render the partial with editing true. Ex:

def edit
  foobar = Foobar.find(params[:id])
  render partial: 'foobar_editor', locals: { foobar: foobar, editing: true }
end

def cancel
  foobar = Foobar.find(params[:id])
  render partial: 'foobar_editor', locals: { foobar: foobar, editing: false }
end

Alex · Answer 2 · 2023-02-15T08:53:14.710

add the action to the target frame? – Dan Tappin

Let me just steal that idea:

<div data-controller="edit-button">
  <a
    href="/project/1/edit"
    data-turbo-frame="project_1"
    data-edit-button-target="toggle"
  >
    Edit
  </a>

  <turbo-frame
    id="project_1"
    data-action="turbo:frame-load->edit-button#toggle"
  >
    content
  </turbo-frame>
</div>

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["toggle"];

  toggle({ target: frame, params: { toggleUrl, toggleText } }) {
    frame.dataset.editButtonToggleTextParam = this.toggleTarget.textContent;
    this.toggleTarget.textContent = toggleText || "Cancel";

    frame.dataset.editButtonToggleUrlParam = this.toggleTarget.href;
    this.toggleTarget.href = toggleUrl || window.location.href;
  }
}

https://stimulus.hotwired.dev/reference/actions#action-parameters

Initially, the only issue that I had was when changing the link href attribute before the actual frame navigation. Just having the data-action didn't stop the frame from navigating. But if that's still an issue, here is another way to do it, it also simplifies the html part:

<a
  href="/project/1/edit"
  data-turbo-frame="project_1"
  data-controller="edit-button"
  data-action="edit-button#toggle:prevent"
>
  Edit
</a>

<turbo-frame id="project_1">
  content
</turbo-frame>

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  // `target` is the link so no need for explicit Target definition
  toggle({ target, params: { toggleUrl, toggleText } }) {
    // but the frame, we need to get manually
    const frame = document.getElementById(target.dataset.turboFrame);
    // navigate the frame before changing link's href
    frame.src = target.href;

    target.dataset.editButtonToggleTextParam = target.textContent;
    target.textContent = toggleText || "Cancel";

    target.dataset.editButtonToggleUrlParam = target.href;
    target.href = toggleUrl || window.location.href;
  }
}

It works, but I don't know if it's a supported use case, which I found here: https://github.com/hotwired/turbo/blob/v7.2.5/src/core/frames/frame_controller.ts#L374

and then in the docs for loading attribute:
https://turbo.hotwired.dev/reference/frames#html-attributes

changes to the src attribute will immediately navigate the element

I can only assume it's ok to change src.

Adding a Stimulus click action to a Turbo link?

2 Answers2