render_async 2.1.6 released
Tags: ruby, rails
Published: 2020-05-12 13:16:29

---
title: render_async 2.1.6 released
published: true
date: 2020-05-10 00:00:00 UTC
tags: ruby, rails
canonical_url: https://pragmaticpineapple.com/render-async-2-1-6-released/
---

In this post, we will go through all the changes that are in the new [2.1.6 version](https://github.com/renderedtext/render_async/releases/tag/2.1.6).

![Skiatos](https://pragmaticpineapple.com/static/2c8d9a0822680a2a02991c93c8ffa4a4/1c72d/cover.jpg "Skiatos")

Photo by [Nick Karvounis](https://unsplash.com/@nickkarvounis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/greece?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Some of the new changes and bug fixes were pretty tricky to solve. I wanted to write a blog post to have detailed hows and whys of how I fixed them.

The new version mainly brought bug fixes:

- [Polling now stops when page navigates using Turbolinks](#polling-now-stops-when-page-navigates-using-turbolinks)
- [Default header `X-Requested-With` is now set](#default-header-x-requested-with-is-now-set)
- [Events delegate now works when toggling](#event-delegation-now-works-when-toggling)
- [Nested partials now load with Turbolinks](#nested-partials-now-load-with-turbolinks)

Let us dive into details of how each was fixed:

## [<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>](#polling-now-stops-when-page-navigates-using-turbolinks)Polling now stops when page navigates using Turbolinks

If you have not heard about [Turbolinks](https://github.com/turbolinks/turbolinks) before, it is an excellent gimmick for your Rails application that makes it behave like a single-page application. It gracefully avoids full page loads when you click a link, for example. Turbolinks does this by fetching a page, swapping in its `<body>` tag, and merging its `<head>` with existing content on the page. The gem has been well adopted in the Rails world, and when you do `rails new my-awesome-app`, it comes equipped with Turbolinks gem from the start.

Before 2.1.6 version, if you used [render\_async’s polling feature](https://github.com/renderedtext/render_async#polling), render\_async did not handle navigation changes with Turbolinks. For example, if your page started polling and you clicked a link, it wouldn’t stop polling. The issue with polling sucked big time! Fortunately, in the new version, this is no more!

There is no more polling issue because we now call `clearInterval` if the`turbolinks:visit` event happens:

```
$(document).one("turbolinks:visit", function () {
  if (typeof _interval === "number") {
    clearInterval(_interval)
    _interval = undefined
  }
})
```

## [<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>](#default-header-x-requested-with-is-now-set)Default header `X-Requested-With` is now set

If you are using Vanilla JavaScript part of the gem (you don’t have jQuery in your project, or you want Vanilla JS for some reason), each request was missing`X-Requested-With` header. This header is important and is set by jQuery by default. It is set by default because some servers check this header as a precaution from CSRF attacks. More about CSRF attack and `X-Requested-With`header can be found in [this great blog post](https://markitzeroday.com/x-requested-with/cors/2017/06/29/csrf-mitigation-for-ajax-requests.html).

Fix was this was pretty easy and straightforward:

```
request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
```

## [<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>](#event-delegation-now-works-when-toggling)Event delegation now works when toggling

If you wanted to [trigger the loading of render\_async](https://github.com/renderedtext/render_async#toggle-event), you could use any element to do so. For example, you wanted to load comments on your blog with render\_async you would so something like this:

```
<!-- app/views/posts/show.html.erb -->

<%= render_async comments_path, toggle: { selector: '#comments-button',
                                          event: :click } do %>
  <a href='#' id='comments-button'>Load comments</a>
<% end %>
```

The method above worked fine if you did not have any other events depending on that link click. But issue occurred to one user when he tried [toggle feature on tabs](https://github.com/renderedtext/render_async/issues/109) in his UI. He wanted to load content when the user was changing tabs in his app. Line `event.preventDefault()` inside toggle logic was stopping the changing of tabs. Events did not delegate to the tab-changing logic, and the tab was never changed. Fortunately, in the new 2.1.6 version, this is not happening anymore!

## [<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>](#nested-partials-now-load-with-turbolinks)Nested partials now load with Turbolinks

Problem with nested partials was the last moment discovery by [ye-ling-aung in his comment](https://github.com/renderedtext/render_async/issues/70#issuecomment-626219698). Nested partials did not load with Turbolinks. If, for some reason, you needed to [nest render\_async calls into one another](https://github.com/renderedtext/render_async#nested-async-renders), you could do it quickly. The problem occurred when the page loaded with Turbolinks. The top-levelrender\_async call got rendered, but the nested calls below did not. It was because render\_async loading logic is triggered when `turbolinks:load` event gets triggered.Triggering loading on `turbolinks:load` is fine for the top-level (initial) render\_async call. But, if you have a nested call, it will wait for`turbolinks:load`, which will not happen, because the page already loaded.

In order to have nested calls render, I added a piece of logic which checks whether the documentstate is either ‘complete’ or ‘interactive’:

```
if (
  document.readyState === "complete" ||
  document.readyState === "interactive"
) {
  // Call render_async rendering logic
}
```

This way, when initial render\_async calls loads and renders nested calls, they are sure to be performed.

## [<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

Fixing and shipping these fixes was such a relief! I am thankful and glad for everyone that kept using render\_async that were having these issues. I also hope that more people will try out the new version and report if they have any problems!

P.S. If you like my work on this gem so far, and you want me 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).