Merge pull request #119 from vanboom/polling_control

#106 Add polling control start/stop events

README.md

@@ -320,7 +320,6 @@ request has been completed. You can achieve this behaviour with something like t
   <a href='#' id='comments-button'>Load comments</a>
 <% 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

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 %>

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 %>