Turbo.visit doesn't find turbo frame?

rubyonrails-talk
1

We have a turbo frame declared in our main application layout file like this:

  <%= turbo_frame_tag "slide_over"%>

We have links on the page which work correctly and render content inside that turbo frame (it’s actually a modal view), and don’t change the URL in the history/browser navigation bar:

 <%= link_to "Title", item_url(@item), data: {turbo_frame: "slide_over"} %>

Elsewhere in our code, we also want to manually show this slide over from javascript/stimulus controller when a user clicks an item, so are initialising a Turbo visit like so:

Turbo.visit("/items/1", {frame: "slide_over"};

However this does seems to perform a full page visit, navigating to /items/1 instead. When debugging Turbo, the culprit appears to be in the Session visit function:

visit(location, options = {}) {
        const frameElement = options.frame ? document.getElementById(options.frame) : null;
        if (frameElement instanceof FrameElement) { <- this evaluates to false!
            frameElement.src = location.toString();
            frameElement.loaded;
        }
        else {
            this.navigator.proposeVisit(expandURL(location), options);
        }
    }

the line if (frameElement instanceof FrameElement) { is evaluating to false, and therefore the frame’s src is not being set.

Does anyone know what we might be doing wrong?

2

I was just looking at this at solved it with:

let frame = document.querySelector('turbo-frame#modal')
 frame.src = '/contacts/new'

If the src changes you can call frame.reload().

I couldn’t get Turbo.visit to work…

3

What version of Turbo (for Rails) are you using?

4

I’ve faced the exact same problem. And the problem was that document.getElementById("your_frame") won’t find it if you wrote your frame tag as <%= turbo_frame_tag "your_frame"%>. Just change <%= turbo_frame_tag "slide_over"%> to <%= turbo_frame_tag "slide_over"%><%end%> and then document.getElementById("slide_over") should return your frame tag and Turbo.visit should work as expected.