From ca86ebb7b0dd9b613c78d0546239f829e9726cdd Mon Sep 17 00:00:00 2001 From: Doug Date: Sat, 16 May 2020 16:20:52 -0500 Subject: [PATCH 1/2] set up immediately, revert #2.1.5 --- app/views/render_async/_request_jquery.js.erb | 3 ++- app/views/render_async/_request_vanilla.js.erb | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/views/render_async/_request_jquery.js.erb b/app/views/render_async/_request_jquery.js.erb index 35e1407..a88a71d 100644 --- a/app/views/render_async/_request_jquery.js.erb +++ b/app/views/render_async/_request_jquery.js.erb @@ -125,7 +125,8 @@ if (window.jQuery) { }); } - _runAfterDocumentLoaded(_setUpToggle); + // DVB _runAfterDocumentLoaded(_setUpToggle); + _setUpToggle(); <% elsif !toggle %> _runAfterDocumentLoaded(_renderAsyncFunction) <% end %> diff --git a/app/views/render_async/_request_vanilla.js.erb b/app/views/render_async/_request_vanilla.js.erb index 8fc9429..6bb6ec2 100644 --- a/app/views/render_async/_request_vanilla.js.erb +++ b/app/views/render_async/_request_vanilla.js.erb @@ -143,7 +143,8 @@ } } - _runAfterDocumentLoaded(_setUpToggle); + // DVB _runAfterDocumentLoaded(_setUpToggle); + _setUpToggle(); <% elsif !toggle %> _runAfterDocumentLoaded(_renderAsyncFunction); <% end %> From 5e4f27f366745b86f011a7363ebc0df143882c69 Mon Sep 17 00:00:00 2001 From: Doug Date: Tue, 2 Jun 2020 16:45:23 -0500 Subject: [PATCH 2/2] add stop polling event --- README.md | 4 +- app/views/render_async/_request_jquery.js.erb | 40 ++++++++++++------- .../render_async/_request_vanilla.js.erb | 40 ++++++++++++------- 3 files changed, 55 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index ba65935..a92ed18 100644 --- a/README.md +++ b/README.md @@ -320,7 +320,6 @@ request has been completed. You can achieve this behaviour with something like t Load comments <% end %> ``` - Also, you can mix interval and toggle features. This way, you can turn polling on, and off by clicking the "Load comments" button. In order to do this, you need to pass `toggle` and `interval` arguments to `render_async` call like this: @@ -343,6 +342,9 @@ You are telling `render_async` to fetch comments_path every 5 seconds. This can be handy if you want to enable polling for a specific URL. +Polling may be stopped by sending the `async-stop` event to the container element. +Polling may be started by sending the `async-start` event to the container element. + NOTE: By passing interval to `render_async`, initial container element will remain in HTML tree, it will not be replaced with request response. You can handle how that container element is rendered and its style by diff --git a/app/views/render_async/_request_jquery.js.erb b/app/views/render_async/_request_jquery.js.erb index a88a71d..6040292 100644 --- a/app/views/render_async/_request_jquery.js.erb +++ b/app/views/render_async/_request_jquery.js.erb @@ -98,19 +98,32 @@ if (window.jQuery) { var _interval; <% if interval %> - var _renderAsyncFunction = function() { - _makeRequest(); - _interval = setInterval(_makeRequest, <%= interval %>); - } - - <% if turbolinks %> - $(document).one('turbolinks:visit', function() { - if (typeof(_interval) === 'number') { - clearInterval(_interval) - _interval = undefined; + var _renderAsyncFunction = function() { + _makeRequest(); + _interval = setInterval(_makeRequest, <%= interval %>); } - }); - <% end %> + + // Register a stop polling event on the container + var container = $("#<%= container_id %>"); + $(container).on('async-stop', function(event){ + if (typeof(_interval) === 'number'){ + clearInterval(_interval) + _interval = undefined; + } + }); + // Register a start polling event on the container + $(container).on('async-start', function(event){ + _renderAsyncFunction(); + }); + + <% if turbolinks %> + $(document).one('turbolinks:visit', function() { + if (typeof(_interval) === 'number') { + clearInterval(_interval) + _interval = undefined; + } + }); + <% end %> <% end %> <% if toggle %> @@ -125,8 +138,7 @@ if (window.jQuery) { }); } - // DVB _runAfterDocumentLoaded(_setUpToggle); - _setUpToggle(); + _runAfterDocumentLoaded(_setUpToggle); <% elsif !toggle %> _runAfterDocumentLoaded(_renderAsyncFunction) <% end %> diff --git a/app/views/render_async/_request_vanilla.js.erb b/app/views/render_async/_request_vanilla.js.erb index 6bb6ec2..eba5e7e 100644 --- a/app/views/render_async/_request_vanilla.js.erb +++ b/app/views/render_async/_request_vanilla.js.erb @@ -108,19 +108,32 @@ var _interval; <% if interval %> - var _renderAsyncFunction = function() { - _makeRequest(); - _interval = setInterval(_makeRequest, <%= interval %>); - } - - <% if turbolinks %> - document.addEventListener("turbolinks:visit", function(e) { - if (typeof(_interval) === 'number') { - clearInterval(_interval); - _interval = undefined; + var _renderAsyncFunction = function() { + _makeRequest(); + _interval = setInterval(_makeRequest, <%= interval %>); } - }); - <% end %> + + // Register a polling stop event on the container + var container = document.getElementById('<%= container_id %>'); + container.addEventListener("async-stop", function(event){ + if (typeof(_interval) === 'number'){ + clearInterval(_interval) + _interval = undefined; + } + }); + // Register a start polling event on the container + container.addEventListener("async-start", function(event){ + _renderAsyncFunction(); + }); + + <% if turbolinks %> + document.addEventListener("turbolinks:visit", function(e) { + if (typeof(_interval) === 'number') { + clearInterval(_interval); + _interval = undefined; + } + }); + <% end %> <% end %> <% if toggle %> @@ -143,8 +156,7 @@ } } - // DVB _runAfterDocumentLoaded(_setUpToggle); - _setUpToggle(); + _runAfterDocumentLoaded(_setUpToggle); <% elsif !toggle %> _runAfterDocumentLoaded(_renderAsyncFunction); <% end %>