From 01618b55af87f13f0a474acd5801d9816cbdc4d2 Mon Sep 17 00:00:00 2001
From: Albert Santoni <albert.santoni@sourcefabric.org>
Date: Thu, 22 Oct 2015 14:28:12 -0400
Subject: [PATCH] Fixed a bug with our table widget toolbar not showing up with
 static data. Also fixed a race condition.

---
 airtime_mvc/public/js/airtime/library/podcast.js |  3 ++-
 airtime_mvc/public/js/airtime/widgets/table.js   | 11 ++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/airtime_mvc/public/js/airtime/library/podcast.js b/airtime_mvc/public/js/airtime/library/podcast.js
index c13209b2a..85501d425 100644
--- a/airtime_mvc/public/js/airtime/library/podcast.js
+++ b/airtime_mvc/public/js/airtime/library/podcast.js
@@ -57,7 +57,8 @@ var AIRTIME = (function (AIRTIME) {
         });
 
         if (ids.length > 0) {
-            // Bulk methods should use post because we're sending data in the request body
+            // Bulk methods should use post because we're sending data in the request body. There is no standard
+            // RESTful way to implement bulk actions, so this is how we do it:
             $.post(endpoint + "bulk", {csrf_token: $("#csrf").val(), method: method, ids: ids}, callback);
         }
     }
diff --git a/airtime_mvc/public/js/airtime/widgets/table.js b/airtime_mvc/public/js/airtime/widgets/table.js
index 165b1b2b7..5fe15b5a2 100644
--- a/airtime_mvc/public/js/airtime/widgets/table.js
+++ b/airtime_mvc/public/js/airtime/widgets/table.js
@@ -57,6 +57,7 @@ var AIRTIME = (function(AIRTIME) {
             "sAjaxSource": baseUrl+"rest/media", //Override me
             "sAjaxDataProp": "aaData",
             "bScrollCollapse": false,
+            "deferLoading" : 1, //0 tells it there's zero elements loaded and disables the automatic AJAX. We don't want to load until after we bind all our event handlers, to prevent a race condition with the "init" event callback.
             "sPaginationType": "full_numbers",
             "bJQueryUI": true,
             "bAutoWidth": false,
@@ -75,6 +76,7 @@ var AIRTIME = (function(AIRTIME) {
             "sDom": 'Rf<"dt-process-rel"r><"H"<"table_toolbar"C>><"dataTables_scrolling"t<"#library_empty"<"#library_empty_image"><"#library_empty_text">>><"F"lip>>',
 
             "fnServerData": self._fetchData,
+            "fnInitComplete" : function() { self._setupEventHandlers(bItemSelection) }
             //"fnDrawCallback" : self._tableDrawCallback
         };
 
@@ -85,8 +87,7 @@ var AIRTIME = (function(AIRTIME) {
         }
 
         self._datatable = self._$wrapperDOMNode.dataTable(options);
-        self._setupEventHandlers(bItemSelection);
-
+        self._datatable.fnDraw(); //Load the AJAX data now that our event handlers have been bound.
 
         //return self._datatable;
         return self;
@@ -163,9 +164,9 @@ var AIRTIME = (function(AIRTIME) {
                 .css('padding-right', f.outerWidth());
         });
 
-        $(self._datatable).on('init', function(e) {
-            self._setupToolbarButtons(self._toolbarButtons);
-        });
+        //Since this function is already called when the datatables initialization is complete, we know the DOM
+        //structure for the datatable exists and can just proceed to setup the toolbar DOM elements now.
+        self._setupToolbarButtons(self._toolbarButtons);
     };