render_async lets you include pages asynchronously with AJAX
MIT License
Bot releases are hidden (Show)
We added support to pass the retry count to the backend. If you need to pass retry count to the backend, you can pass retry_count_header
in render_async's options:
<%= render_async users_path,
retry_count: 5,
retry_count_header: 'Retry-Count-Current' %>
And then in controller, you can read the value from request headers.
request.headers['Retry-Count-Current']&.to_i
This was added by @reneklacan in https://github.com/renderedtext/render_async/pull/147, many thanks 🙇
Published by nikolalsvk over 3 years ago
We fixed the issue with TypeError when user navigates away from a page before the request is finished. Thanks to @yhirano55, the issue was resolved in https://github.com/renderedtext/render_async/pull/144 🎉
Also, @yhirano55 fixed one entry in the documentation in https://github.com/renderedtext/render_async/pull/145, thanks a lot for that.
That's it for now, thanks for reading 📖
Published by nikolalsvk over 3 years ago
The new version brings support for the new Turbo https://github.com/hotwired/turbo-rails from the Rails folks.
You can now specify:
RenderAsync.configure do |config|
config.turbo = true # Enable this option if you are using Turbo
end
To have the Turbo library work properly in your Rails applications. Big thanks to @Mbuckley0 for bringing this to life in https://github.com/renderedtext/render_async/pull/141
A bug fix with the configuration was solved by renaming the configuration in the code here https://github.com/renderedtext/render_async/pull/137
Also, some fixes to documentation were made in https://github.com/renderedtext/render_async/pull/139 and https://github.com/renderedtext/render_async/pull/142
Other than that, we added Rails 6 integration tests in https://github.com/renderedtext/render_async/pull/138 and the CONTRIBUTING.md file got updated there as well.
That's it for now, thanks for tuning in 📺
Published by nikolalsvk almost 4 years ago
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:
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: https://github.com/renderedtext/render_async/issues/121, https://github.com/renderedtext/render_async/issues/126, https://github.com/renderedtext/render_async/issues/129. More info in the docs here.
We closed https://github.com/renderedtext/render_async/issues/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.
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.
This is a bug fix mentioned in https://github.com/renderedtext/render_async/issues/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!
Published by nikolalsvk about 4 years ago
🎉 New version of render_async is out! In the new version, there are a couple of new features:
👾 P.S. There is a render_async
Discord server, please join and let's make render_async even better!
If you want to retry requests but with some delay in between the calls, you can pass a retry_delay option together with retry_count like so:
<%= render_async users_path,
retry_count: 5,
retry_delay: 2000 %>
This will make render_async wait for 2 seconds before retrying after each failure. In the end, if the request is still failing after the 5th time, it will dispatch a default error event.
You can read more about this feature in the README here
You can now control polling with by dispatching these 2 events:
💡 Please note that events need to be dispatched to a render_async container.
An example of how you can do this looks like this:
<%= render_async wave_render_async_path,
container_id: 'controllable-interval', # set container_id so we can get it later easily
interval: 3000 %>
<button id='stop-polling'>Stop polling</button>
<button id='start-polling'>Start polling</button>
<script>
var container = document.getElementById('controllable-interval')
var stopPolling = document.getElementById('stop-polling')
var startPolling = document.getElementById('start-polling')
var triggerEventOnContainer = function(eventName) {
var event = new Event(eventName);
container.dispatchEvent(event)
}
stopPolling.addEventListener('click', function() {
container.innerHTML = '<p>Polling stopped</p>'
triggerEventOnContainer('async-stop')
})
startPolling.addEventListener('click', function() {
triggerEventOnContainer('async-start')
})
</script>
You can read more about it in the Controlled polling section of the README.
The content_for name may be customized by passing the content_for_name
option to render_async
.
This option is especially useful when doing nested async renders to better control the location of the injected JavaScript.
For example:
<%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>
<%= content_for :render_async_comment_stats %>
This explanation is also available in the README
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!
Published by nikolalsvk over 4 years ago
Release 2.1.6 solves a couple of minor bugs:
event.preventDefault()
in toggle logic (issue: https://github.com/renderedtext/render_async/issues/109, PR: https://github.com/renderedtext/render_async/pull/110)Please test them out and post some findings if something is broken ❤️
Published by nikolalsvk over 4 years ago
In this version, render_async will emit emits by default. If your request is finished successfully, a render_async_load
event will fire. If it goes badly, the render_async_error
will fire.
You can then catch these events in your code with something like this:
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);
});
As you've seen in the previous example, you can now access event.container
which will give you the associated DOM element. DOM element will be the one it just got replaced after the request has finished.
Toggle event listeners are not added after the page has loaded.
If you're using jQuery to trigger an event like so
$(document).ready(function(){
$("#render-async-trigger").trigger('click');
});
Make sure you're using render_async with jQuery configuration set to true!
OR
If you're using it with Vanilla JS (as is, as installed), make sure to register these events after the DOMContentLoaded
is fired!
Published by nikolalsvk almost 5 years ago
This release solves https://github.com/renderedtext/render_async/issues/94 and allows you to unbind an event when using toggle functionality of the gem.
You can unbind an event by passing once: true
argument to render_async toggle option:
<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click, once: true } do %>
<a href='#' id='detail-button'>Detail</a>
<% end %>
Published by nikolalsvk almost 5 years ago
This release fixed a bug mentioned here https://github.com/renderedtext/render_async/issues/92
There was also an issue when you pass in an error message with double quotes, it would cause syntax error in JavaScript in the browser when request fails.
Published by nikolalsvk about 5 years ago
In 2.1.2 release, a bug that led to triggering render_async function immediately when using Turbolinks is fixed. This is the issue that got fixed https://github.com/renderedtext/render_async/issues/87
Published by nikolalsvk about 5 years ago
New release (2.1.1) let's you toggle when render_async gets loaded on the page.
By passing in a toggle
hash, you can trigger render_async by clicking or doing other things to HTML elements.
You can trigger render_async by doing something like this:
<a href='#' id='detail-button'>detail</a>
<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } %>
This will trigger render_async to load when the user clicks the "detail" link on the page. render_async won't load until that event is triggered.
DEPRECATION WARNING:
If you've been using html_options
as a second argument when calling render_async, you will have to change it to using a html_options
hash like this:
<%= render_async users_path, html_options: { nonce: 'lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=' } %>
Published by nikolalsvk over 5 years ago
Two new features come with 2.1.0 version! 🌮
render_async
can now retry on request failure for number of times you specify
<%= render_async users_path, retry_count: 5, error_message: "Users fetch has failed" %>
Closed https://github.com/renderedtext/render_async/issues/46
You can now poll your paths and URLs by passing interval
option to render_async
<%= render_async comments_path, interval: 5000 %>
This will fetch comments_path every 5 seconds. Closed https://github.com/renderedtext/render_async/issues/67 with this feature.
Container element is NOT being replaced like in other cases. This means that you will have to deal with render_async container element. There are ways of doing this by passing in an HTML element name and HTML element class.
Published by nikolalsvk almost 6 years ago
Locked bundler dependency was making problems to some users https://github.com/renderedtext/render_async/issues/73
This release removes bundler from gemspec file and solves the issue.
Published by nikolalsvk almost 6 years ago
If you're using Turbolinks 5 or higher, you can resolve this by setting Turbolinks configurtion of render_async to true:
RenderAsync.configure do |config|
config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end
This way, you're not breaking Turbolinks flow of loading or reloading a page.
Also, invalid jQuery Promise method name has been replaced in this version.
Published by nikolalsvk about 6 years ago
render_async
now renders the usual, non-jQuery JavaScript code to fetch your AJAX requests and
show content on the page.
If you for some reason need jQuery part of render_async
, you must configure render_async
:
RenderAsync.configure do |config|
config.jquery = true
end
render_async
2.0.0 (finally) brings error handling to the gem.
You can pass in error_message
argument to the render_async
helper and have it show up
in the case of a failed AJAX request.
<%= render_async users_path,
error_message: '<p>Sorry, users loading went wrong :(</p>' %>
If your requests fails, users will see the "Sorry, users loading went wrong :(" message.
If that's not enough, you can pass in error_event_name
which will trigger and event when
something bad happens to your request.
<%= render_asyc users_path, error_event_name: 'users-error-event' %>
Then, you can catch the event like this:
document.addEventListener('users-error-event', function() {
// I'm on it
})
Event creation and dispatching should now work in IE 🎉
Published by nikolalsvk about 6 years ago
You can now render non-GET requests with render_async!
e.g.
<%= render_async some_post_path,
method: 'POST',
data: { fresh: 'AF' },
headers: { 'Content-Type': 'text' } %>
This is supported for jQuery and Vanilla JS users!
Published by nikolalsvk over 6 years ago
Changes brought in 1.2.0 version:
Passing html_element_name
will allow you to control which HTLM element will serve as a container (placeholder) before your request gets loaded. This will prove useful if you're using render_async
inside a table.
render_async
will attempt to fetch request only when document is ready.
Published by nikolalsvk almost 7 years ago
Fixed non-jQuery JavaScript behaviour where it would replace the parent element. https://github.com/renderedtext/render_async/issues/39
E.g.
<div id="parent">
Text or elements here
<%= render_async comment_stats_path %>
</div>
render_async
now won't replace the div with the parent
ID.
Published by nikolalsvk almost 7 years ago
Trying to evaluate jQuery when it is undefined would throw a ReferenceError to the console. Trying to retrieve it on the global window instead will result in it being undefined if not defined.
Prior to this commit, an async request would go out but the response would be ignored, regardless of result.
render_async_cache
to take a placeholderYou can now pass in the placeholder to render_async_cache
like you can to render_async
Published by nikolalsvk about 7 years ago
render_async
will utilize jQuery if available. If not, it will fallback to vanilla JavaScript to make a request and append request response to HTML.