Feature request: Refresh with event

[pedantic-git]

I'm leaving this issue here after a chat with @nikolalsvk on Discord yesterday.

While it's great that render_async allows the rendered partial to be 'refreshed' (i.e. fetched and rendered) on a periodic basis with polling, it would be great if instead it could be refreshed in response to a JavaScript event.

For example, in my case I have a form on the user settings page that updates the user's status in Mailchimp. Because it integrates with a 3rd-party API, I render it asynchronously so that any failures/performance issues don't affect the rest of the page. When the user submits the form (using JavaScript) I want the resulting JS event to then refresh the entire partial to show the new status.

I imagine the API would be something like:

render_async mailchimp_form_path, refresh_event: 'refreshForm', container_id: 'mailchimp-form'

(or maybe you could have a default event name like refreshAsync and use the API only to override that name or disable the behaviour).

Then attach an event handler to the root element that refreshes every time it sees that event.

As an example of how to use it: inside my component, at the end of my form-handling code in JavaScript I could dispatch the event using standard JS. For example:

document.getElementById('mailchimp-form').dispatchEvent(new CustomEvent('refreshForm'))

Let me know if any of the above is not clear and I'll be happy to explain further!

[nikolalsvk]

Thanks a lot, @pedantic-git! It really is a pedantic description 😄

I will try to tackle this in the next batch of updates.

[pedantic-git]

Awesome! Looking forward to it! Let me know how I can help!

[nikolalsvk]

Hey, @pedantic-git. I added support for dispatching an event with the name refresh on the render_async's container. There is more information in the 2.1.8 release and docs here.

Let me know if this is something you were looking for. Also, let me know if there are some improvements we could make to it so it's even better.

Cheers 🍻

[pedantic-git]

@nikolalsvk Thanks for this! I haven't had a chance to test it in Stimulus because I implemented it in UJS and that implementation works - but I've replaced my hacky UJS view with one that raises the refresh event and it works beautifully!

[nikolalsvk]

Awesome, @pedantic-git. I am glad you like it, feel free to share any improvement ideas, it was nice working with you.