Skip to content

Reload partials on demand & start polling on page load
Compare
Choose a tag to compare
@nikolalsvk nikolalsvk released this 24 Oct 15:33
· 35 commits to master since this release
2.1.8
9167653

The new version of render_async is out! 🎉

👾 P.S. There is a render_async Discord server, please join and let's make render_async even better!

The new version brings:

  • Reloading partials on demand
  • Start polling on page load when toggle is used
  • Configure nonce globally
  • Assign start and stop events after the page loaded

♻️ Refresh (reload) render_async partials

This feature was requested in at least 3 issues opened on the repo recently. Finally, it is here!
You can now provide a button for your users to easily refresh a partial that is render by render_async. Take a look at the example below:

<%= 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, every time a "Refresh comments" button is clicked, render_async will reload the comments partial. Hope you like the new feature.
The issues closed with this feature: #121, #126, #129. More info in the docs here.

🐎 Start polling on page load when toggle is used

We closed #118 with this feature. You can now specify start: true inside the toggle hash like this:

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

This will make render_async to start polling on page load. Later, you can toggle polling with the "Toggle comments loading" button. There is more info in the docs here.

🔧 Configure nonce globally

You can specify nonces: true globally and never deal with it in specific render_async calls. Just add the following to your render_async configuration:

RenderAsync.configure do |config|
  config.nonces = true
end

After that, all javascript_tag elements will have nonce: true set. More info in the docs here.

⏯️ Assign start and stop events after the page loaded

This is a bug fix mentioned in #128. We moved the event set up after the page loaded.
If you had content_for inside the head tag, using async-start and async-stop will start working for you again.

That's all folks, catch you in the next one!

👾 P.S. There is a render_async Discord server, please join and let's make render_async even better!

Assets 2
Loading