The new version brings a couple of good news in these rough times.

Explicit way to fire events on load

Before this feature got introduced, the only way to register when render_async finishes is to give it an event name like so:

<%= render_async users_path, event_name: "users-loaded" %>

And then in your JavaScript code, you could do something like this:

document.addEventListener("users-loaded", function (event) {
  console.log("Users have loaded!")
  console.log(event)
})

Let’s say you wanted to catch an error when it happens. You had to pass in error_event_name parameter:

<%= render_asyc users_path, error_event_name: 'users-error-event' %>

Later, you can catch it like so:

document.addEventListener("users-error-event", function (event) {
  // I'm on it
  console.log("Loading users failed!")
  console.log(event)
})

From version 2.1.5, you can easily catch these events without passing these parameters

🔥 Firing events on load and error by default

render_async now fires 2 events:

• render_async_load - if all goes well and a request is finished successfully
• render_async_error - if something goes south with loading the request

Now all you have to do is call render_async:

<%= render_async users_path %>

And write JavaScript to catch potential events:

document.addEventListener("render_async_load", function (event) {
  console.log("Async partial loaded!", event)
})
document.addEventListener("render_async_error", function (event) {
  console.log("Async partial could not load!", event)
})

👁 Making DOM element available in events

Some users were having a hard time establishing which DOM element was the event fired. In 2.1.5 version, you can now access the container where your request loads easily.

We’ll take previous example with event loading:

document.addEventListener("render_async_load", function (event) {
  console.log("Async partial loaded in this container:", event.container)
})
document.addEventListener("render_async_error", function (event) {
  console.log(
    "Async partial could not load in this container:",
    event.container
  )
})

Bugfix for toggle event handlers

A bug when toggle event handlers were added before the DOM loaded is fixed.

Now you can use render_async to easily show content on click or another event.

Wrap up

Big thanks to all contributors working on this release, thank you for helping me:

• colinxfleming
• maximgeerinck
• lipsumar

That’s, it folks, download the gem and try it out. Show some love and star the repo.

P.S. If you like my work on this gem so far, consider sponsoring me on GitHub Sponsors or through PayPal.