Load a dropdown only once

1

Hi :),
I wanted to know how to load a dropdown only once.

For Hey, if we click once, there is a call. However, there is no call the second time.

Thanks :slight_smile:

20210312_100302
20210312_1003021326×726 487 KB

2

You need two things to achieve this kind of behaviour:

  1. add a src attribute to you frame, this will make your frame load separately. (see)
  2. Add loading="lazy to your frame. This will make your frame load only when it is visible. (see). Once the frame is loaded it will stay the same.

Together this would be something like:

<details>
<summary>
Clicking me should fetch /dropdown
</summary>
<turbo-frame id="dropdown_content" src="/dropdown" loading="lazy">
</turbo-frame>
</details>

HEY also uses the details/summary elements, but probably has some more complex logic for fetching the content. This is just the most basic example.

1 Like
3
4

In Hey, there is link which targets the frame that loads the content:

    <a class="undecorated push_half--right" data-turbo-frame="my_stuff" data-popup-menu-target="link" href="/me" hidden="">Settings</a>

By clicking on this, the frame src will change to /me and the content will be loaded. On any subsequent action since the frame has loading='lazy' it is not reloaded anymore.

5

It’s works :smiley:
Thanks :slight_smile: