Turboframe append?

1

Is there a way to get turboframe to append elements to an existing turboframe?

I’m using lazy loading of turboframe as an infinite pager with lazy loading. It works great. But to the downside is that it can’t put the new elements in the same container. That’s a big downside in that it prevents useful layout options I’d like to take advantage of.

To give some more specificity, each page is setup like this:


<turbo-frame id="__pagination{{ $pagenumber }}" target="_top> 
   {{ ELEMENTS FOR THIS PAGE }}
</turbo-frame>

<turbo-frame id="__pagination{{ $nextpagenumber }}" src="{{ $nextpageurl }}" loading=lazy data-turbo-action="advance" target="_top">
</turbo-frame>

Or…

<turbo-frame id="__pagination{{ $pagenumber }}" target="_top> 
    {{ ELEMENTS FOR THIS PAGE }}

  <turbo-frame id="__pagination{{ $nextpagenumber }}" src="{{ $nextpageurl }}" loading=lazy data-turbo-action="advance" target="_top">
  </turbo-frame>
</turbo-frame>

On infinite scroll, the next items fill in the place holder like this:

<turbo-frame id="__pagination{{ $pagenumber }}" target="_top> 
   {{ ELEMENTS FOR THIS PAGE }}
</turbo-frame>

<turbo-frame id="__pagination{{ $nextpagenumber }}" src="{{ $nextpageurl }}" loading=lazy data-turbo-action="advance" target="_top">
     {{ ELEMENTS FOR NEXT PAGE }}
</turbo-frame>

<turbo-frame id="__pagination{{ $nextnextpagenumber }}" src="{{ $nextnextpageurl }}" loading=lazy data-turbo-action="advance" target="_top">
</turbo-frame>

So…is there a way to have setup so it fills in like this?

<turbo-frame id="__pagination{{ $pagenumber }}" target="_top> 
   {{ ELEMENTS FOR THIS PAGE }}
   {{ ELEMENTS FOR NEXT PAGE }}
</turbo-frame>

<turbo-frame id="__pagination{{ $nextnextpagenumber }}" src="{{ $nextnextpageurl }}" loading=lazy data-turbo-action="advance" target="_top">
</turbo-frame>

Of course, where the turboframe to the next page lands is not important in the end, because it is a hidden element.

2

You could use a combination of turbo-stream tag with the turbo-frame tag to append html

2 Likes