Reloading Rails Partials on Demand with render_async

The brand new model of render_async is out, and one of the vital requested options is out with it as effectively!
Learn on to seek out out concerning the novelties within the new 2.1.8 model of the gem.

A fast overview of the latest adjustments:

That’s it, let’s bounce into particulars of every change beneath.

👂 Psst! We now have a render_async Discord server. Be a part of us there.

Refresh Rails partials on demand

As you may already know, render_async hundreds partials asynchronously after
your web page has loaded. Loading of partials in an async manner is superb and
useful, however the gem customers needed extra energy and management. After so many
completely different requests for this, we carried out the characteristic to manually refresh the
already loaded partial on the web page with out reloading the entire web page.

You are able to do this simply by dispatching an occasion with a “refresh” identify to the
render_async HTML container. Let’s present this on an instance the place we load
feedback in a partial:

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

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

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

  button.addEventListener('click on', perform() {
    var occasion = new Occasion('refresh');
    
    container.dispatchEvent(occasion)
  })
</script>

Now, the render_async will load feedback on web page load. However, if the person needs
to reload the feedback part, she will click on the “Refresh feedback” button. The
button will then emit the “refresh” occasion to the render_async’s container.

One factor to notice is that it’s essential to move within the replace_container: false.
Passing this feature will save the unique render_async HTML factor so you possibly can
dispatch the “refresh” occasion on it. To seek out out how one can allow this
globally, so that you solely write it in a single place, see the configuration choices.

Engaged on this characteristic and fixing so many individuals’s issues with this was
superb. I hope you discover it helpful in your routine.

We added a brand new characteristic to the prevailing mixture of options. Simply in case
you weren’t conscious, you are able to do HTML polling with render_async.
On prime of that, we added a characteristic the place you can begin and cease polling on
demand. That is doing an incredible service to customers, however a few of the customers needed to
begin polling instantly because the web page hundreds, to not look forward to the person to
set off polling.

Fortunately, we added a characteristic that permits you to specify to begin polling on web page load:

<a href='#' id='comments-button'>Toggle feedback loading</a>
<%= render_async comments_path,
                 toggle: { selector: '#comments-button',
                           occasion: :click on,
                           begin: true },
                 interval: 2000 %>

The code above ought to render the “Toggle feedback loading” button, and begin
polling as quickly because the web page is rendered. That is all attainable by including the
begin: true choice to the toggle hash.

DRY up the code with new configuration choices

Lastly, some new configuration choices landed within the newest 2.1.8 model. So,
what’s new? In the event you wanted to set nonce: true with render_async, you possibly can
now do that globally. Additionally, if you’re about to make use of our new characteristic with
refreshing partials, you’ll profit from setting replace_container: false
in a single place.

You are able to do this in your initializers or wherever you discover snug by doing:

RenderAsync.configure do |config|
  config.nonces = true 
  config.replace_container = false 
finish

To determine why you would want replace_container: false, please learn the
first part of this weblog put up about refreshing Rails partials.

If it’s your first time listening to about this, we additionally produce other
configuration choices within the docs.

Repair begin and cease occasions

There have been issues with occasion listeners for async-start and async-stop
occasions. These occasions served to regulate polling by way of occasions. Since these
occasion listeners have been arrange as quickly because the render_async JavaScript code bought
evaluated, they didn’t get registered if you happen to put content_for :render_async
within the head of your pages.

Within the new model, we made positive these occasion listeners registered after the
web page has totally loaded. When you have this drawback, you possibly can safely put again
content_for within the head, and every thing ought to work high-quality.

Remaining ideas

Don’t forget to star 🌟 the undertaking and share it with your mates and
coworkers if you happen to discover it helpful.

Releasing a brand new model, sharpening the README, and dealing on new options was
a blast! Because of everybody that helped and hold doing the nice work on
contributing. Please be a part of the Discord if you’re
utilizing this gem. That manner, we will make it even higher!

P.S. 💸 In the event you like my work on this gem to date, and also you need to give me some juice
and motivation to maintain enhancing and sustaining it, contemplate sponsoring me on
GitHub Sponsors or by way of
PayPal.

Additionally, be happy to share this on Twitter with buddies and coworkers beneath:

I simply launched a brand new model of render_async with a cool characteristic. Learn all about it beneath ⏬https://t.co/crECfBrtn4

— Nikola Đuza (@nikolalsvk) October 27, 2020