On this publish, we’ll undergo all of the adjustments which are within the new
2.1.6 model.
Among the new adjustments and bug fixes had been fairly tough to unravel. I wished to
write a weblog publish to have detailed hows and whys of how I fastened them.
The brand new model primarily introduced bug fixes:
Allow us to dive into particulars of how every was fastened:
Polling now stops when web page navigates utilizing Turbolinks
When you have not heard about Turbolinks earlier than,
it is a wonderful gimmick in your Rails software that makes it behave like a single-page
software. It gracefully avoids full web page masses while you click on a hyperlink, for
instance. Turbolinks does this by fetching a web page, swapping in its <physique> tag,
and merging its <head> with current content material on the web page. The gem has been properly
adopted within the Rails world, and while you do rails new my-awesome-app, it comes
geared up with Turbolinks gem from the beginning.
Earlier than 2.1.6 model, should you used render_asyncโs polling function,
render_async didn’t deal with navigation adjustments with Turbolinks. For instance,
in case your web page began polling and also you clicked a hyperlink, it wouldnโt cease polling.
The difficulty with polling sucked large time! Fortuitously, within the new model, this
is not any extra!
There isn’t a extra polling situation as a result of we now name clearInterval if the
turbolinks:go to occasion occurs:
$(doc).one("turbolinks:go to", operate () {
if (typeof _interval === "quantity") {
clearInterval(_interval)
_interval = undefined
}
})If you’re utilizing Vanilla JavaScript a part of the gem (you donโt have jQuery in your
venture, otherwise you need Vanilla JS for some purpose), every request was lacking
X-Requested-With header. This header is necessary and is ready by jQuery by
default. It’s set by default as a result of some servers verify this header as a
precaution from CSRF assaults. Extra about CSRF assault and X-Requested-With
header might be present in
this nice weblog publish.
Repair was this was fairly straightforward and simple:
request.setRequestHeader("X-Requested-With", "XMLHttpRequest")Occasion delegation now works when toggling
In case you wished to set off the loading of render_async, you possibly can use any factor to take action. For instance, you wished to load feedback
in your weblog with render_async you’ll so one thing like this:
<%= render_async comments_path, toggle: { selector: '#comments-button',
occasion: :click on } do %>
<a href='#' id='comments-button'>Load feedback</a>
<% finish %>The strategy above labored advantageous should you didn’t have another occasions relying on that
hyperlink click on. However situation occurred to 1 person when he tried
toggle function on tabs
in his UI. He wished to load content material when the person was altering tabs in
his app. Line occasion.preventDefault() inside toggle logic was stopping the altering of
tabs. Occasions didn’t delegate to the tab-changing logic, and the tab was by no means
modified. Fortuitously, within the new 2.1.6 model, this isn’t taking place anymore!
Nested partials now load with Turbolinks
Drawback with nested partials was the final second discovery by ye-ling-aung in his remark.
Nested partials didn’t load with Turbolinks. If, for some purpose, you wanted to
nest render_async calls into each other,
you possibly can do it shortly. The issue occurred when the web page loaded with Turbolinks. The highest-level
render_async name obtained rendered, however the nested calls beneath didn’t. It was as a result of render_async
loading logic is triggered when turbolinks:load occasion will get triggered.
Triggering loading on turbolinks:load is okay for the top-level (preliminary)
render_async name. However, when you’ve got a nested name, it should look forward to
turbolinks:load, which is not going to occur, as a result of the web page already loaded.
As a way to have nested calls render, I added a chunk of logic which checks whether or not the doc
state is both โfullโ or โinteractiveโ:
if (
doc.readyState === "full" ||
doc.readyState === "interactive"
) {
}This fashion, when preliminary render_async calls masses and renders nested calls, they
are positive to be carried out.
Closing ideas
Fixing and transport these fixes was such a aid! I’m grateful and glad for
everybody that stored utilizing render_async that had been having these points. I additionally
hope that extra individuals will check out the brand new model and report if they’ve any
issues!
P.S. In case you like my work on this gem to this point, and also you need me to maintain enhancing
and sustaining it, think about sponsoring me on
GitHub Sponsors or via
PayPal.
