Reloading Rails Partials on Demand with render_async
Tags: rails, ruby
Published: 2020-11-02 12:13:51

---
title: Reloading Rails Partials on Demand with render_async
published: true
date: 2020-10-27 00:00:00 UTC
tags: rails, ruby
canonical_url: https://pragmaticpineapple.com/reloading-rails-partials-on-demand-with-render-async/
---

The new version of render\_async is out, and one of the most requested features is out with it as well! Read on to find out about the novelties in the [new 2.1.8 version](https://github.com/renderedtext/render_async/releases/tag/2.1.6) of the gem.

![Niagara Falls](https://pragmaticpineapple.com/static/5a9c80e05ad31830be69a5c0585a9e74/1c72d/cover.jpg "Niagara Falls")

Photo by [Vishwesh Jirgale](https://unsplash.com/@vishweshji?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/niagara-falls?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

A quick overview of the recent changes:

- [Refresh Rails partials on demand](#refresh-rails-partials-on-demand)
- [Start polling immediately when the toggle is used](#start-polling-immediately-when-the-toggle-is-used)
- [DRY up the code with new configuration options](#dry-up-the-code-with-new-configuration-options)
- [Fix start and stop events](#fix-start-and-stop-events)

That’s it, let’s jump into details of each change below.

> 👂 Psst! We have a [render\_async Discord server](https://discord.gg/SPfbeRm). Join us there.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#refresh-rails-partials-on-demand)Refresh Rails partials on demand

As you might already know, render\_async loads partials asynchronously after your page has loaded. Loading of partials in an async way is excellent and helpful, but the gem users wanted more power and control. After so many different requests for this, we implemented the feature to manually refresh the already loaded partial on the page without reloading the whole page.

You can do this easily by dispatching an event with a “refresh” name to the render\_async HTML container. Let’s show this on an example where we load comments in a partial:

```
<%= render_async comments_path,
                 container_id: 'refresh-me',
                 replace_container: false %>

<button id="refresh-button">Refresh comments</button>

<script>
  var button = document.getElementById('refresh-button')
  var container = document.getElementById('refresh-me');

  button.addEventListener('click', function() {
    var event = new Event('refresh');
    // Dispatch 'refresh' on the render_async container
    container.dispatchEvent(event)
  })
</script>
```

Now, the render\_async will load comments on page load. But, if the user wants to reload the comments section, she can click the “Refresh comments” button. The button will then emit the “refresh” event to the render\_async’s container.

One thing to note is that you need to pass in the `replace_container: false`. Passing this option will save the original render\_async HTML element so you can dispatch the “refresh” event on it. To find out how you can enable this globally, so you only write it in one place, see the [configuration options](#dry-up-the-code-with-new-configuration-options).

Working on this feature and solving so many people’s problems with this was amazing. I hope you find it useful in your routine.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#start-polling-immediately-when-the-toggle-is-used)Start polling immediately when the toggle is used

We added a new feature to the existing combination of features. Just in case you weren’t aware, you can do [HTML polling with render\_async](https://github.com/renderedtext/render_async#polling). On top of that, we added a feature where you can start and stop polling on demand. This is doing a great service to users, but some of the users wanted to start polling immediately as the page loads, not to wait for the user to trigger polling.

Luckily, we added a feature that allows you to specify to start polling on page load:

```
<a href='#' id='comments-button'>Toggle comments loading</a>
<%= render_async comments_path,
                 toggle: { selector: '#comments-button',
                           event: :click,
                           start: true },
                 interval: 2000 %>
```

The code above should render the “Toggle comments loading” button, and start polling as soon as the page is rendered. This is all possible by adding the`start: true` option to the `toggle` hash.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#dry-up-the-code-with-new-configuration-options)DRY up the code with new configuration options

Finally, some new configuration options landed in the latest 2.1.8 version. So, what is new? If you needed to set `nonce: true` with render\_async, you could now do this globally. Also, if you are about to use our new feature with refreshing partials, you will benefit from setting `replace_container: false`in one place.

You can do this in your initializers or wherever you find comfortable by doing:

```
RenderAsync.configure do |config|
  config.nonces = true # setting it to true, all render_asnyc javascript_tag elements receive nonce: true
  config.replace_container = false # setting it to false, the original render_asnyc container is kept
end
```

To figure out why you would need `replace_container: false`, please read the first section of this blog post about [refreshing Rails partials](#refresh-rails-partials-on-demand).

If it is your first time hearing about this, we also have other [configuration options in the docs](https://github.com/renderedtext/render_async#configuration-options).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#fix-start-and-stop-events)Fix start and stop events

There were problems with event listeners for `async-start` and `async-stop`events. Those events served to control polling through events. Since those event listeners were set up as soon as the render\_async JavaScript code got evaluated, they didn’t get registered if you put `content_for :render_async`in the head of your pages.

In the new version, we made sure these event listeners registered after the page has fully loaded. If you have this problem, you can safely put back`content_for` in the head, and everything should work fine.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#final-thoughts)Final thoughts

Do not forget to star 🌟 the project and share it with your friends and coworkers if you find it useful.

Releasing a new version, polishing the README, and working on new features was a blast! Thanks to everyone that helped and keep doing the great work on contributing. Please join the  [Discord](https://discord.gg/SPfbeRm) if you are using this gem. That way, we can make it even better!

P.S. 💸 If you like my work on this gem so far, and you want to give me some juice and motivation to keep improving and maintaining it, consider sponsoring me on [GitHub Sponsors](https://github.com/sponsors/nikolalsvk) or through [PayPal](https://www.paypal.me/nikolalsvk/9.99).

Also, feel free to share this on Twitter with friends and coworkers below:

{% twitter 1321087060854378497 %}