Common table functions are now run on modal.show

When a modal windows is displayed, a set of
functions need to be executed, to perform
some additional processing on the tables
in the modal like check-all checkbox,
table sorting, etc.

Fixes bug 997670

Change-Id: I1fdd2d55ccaa184d5fb34e4c0fed7455dee6b0d3

horizon/static/horizon/js/horizon.js

@@ -213,7 +213,7 @@ var Horizon = function() {
         }
       });
 
-      $("form :checkbox").on("click", function (evt) {
+      $("div.table_wrapper, div.modal_wrapper").on("click", ':checkbox', function (evt) {
         var $form = $(this).closest("form");
         var any_checked = $form.find("tbody :checkbox").is(":checked");
 

horizon/static/horizon/js/modals.js

@@ -23,13 +23,13 @@ horizon.modals.create = function (title, body, confirm, cancel) {
   }
   var template = horizon.templates.compiled_templates["#modal_template"],
     params = {title: title, body: body, confirm: confirm, cancel: cancel},
-    modal = $(template.render(params)).appendTo("body");
+    modal = $(template.render(params)).appendTo("div.modal_wrapper");
   return modal;
 };
 
 
 horizon.modals.success = function (data, textStatus, jqXHR) {
-  $('body').append(data);
+  $('div.modal_wrapper').append(data);
   $('.modal span.help-block').hide();
   $('.modal:last').modal();
 
@@ -91,8 +91,8 @@ horizon.addInitFunction(function() {
   });
 
   // Focus the first usable form field in the modal for accessibility.
-  $(document).on('shown', '.modal', function(evt) {
-    $(this).find("input, select, textarea").filter(":visible:first").focus();
+  $('div.modal_wrapper').on('shown', '.modal', function(evt) {
+    $(this).find(":text, select, textarea").filter(":visible:first").focus();
   });
 
   $('.ajax-modal').live('click', function (evt) {
@@ -108,7 +108,7 @@ horizon.addInitFunction(function() {
         var template = horizon.templates.compiled_templates["#spinner-modal"];
         horizon.modals.spinner = $(template.render());
 
-        horizon.modals.spinner.appendTo("body");
+        horizon.modals.spinner.appendTo("div.modal_wrapper");
         horizon.modals.spinner.modal({backdrop: 'static'});
         horizon.modals.spinner.spin(horizon.modals.spinner_options);
       },

horizon/static/horizon/js/tables.js

@@ -1,10 +1,12 @@
-horizon.datatables.init_sorting = function () {
+horizon.datatables.set_table_sorting = function (parent) {
   // Function to initialize the tablesorter plugin strictly on sortable columns.
-  $("table.table").each(function () {
+  $(parent).find("table.table").each(function () {
     var $this = $(this),
         options = {};
     $this.find("thead th").each(function (i, val) {
-      if (!$(this).hasClass('sortable')) {
+      // Disable if not sortable or has <= 1 item
+      if (!$(this).hasClass('sortable') ||
+          $this.find('tbody tr').not('.empty').length <= 1) {
         options[i] = {sorter: false};
       }
     });
@@ -14,7 +16,23 @@ horizon.datatables.init_sorting = function () {
   });
 };
 
+horizon.datatables.add_table_checkboxes = function(parent) {
+  $(parent).find('table thead .multi_select_column').each(function(index, thead) {
+    if (!$(thead).find(':checkbox').length &&
+        $(thead).parents('table').find('tbody :checkbox').length) {
+      $(thead).append('<input type="checkbox">');
+    }
+  });
+};
+
 horizon.addInitFunction(function() {
+  $('div.table_wrapper, div.modal_wrapper').on('click', 'table thead .multi_select_column :checkbox', function(evt) {
+    var $this = $(this),
+        $table = $this.closest('table'),
+        is_checked = $this.prop('checked'),
+        checkboxes = $table.find('tbody :checkbox');
+    checkboxes.prop('checked', is_checked);
+  });
   $('.table_search input').quicksearch('tbody tr', {
     'delay': 300,
     'loader': 'span.loading',
@@ -33,25 +51,14 @@ horizon.addInitFunction(function() {
     }
   });
 
-  $('table.sortable').each(function(index, table) {
-      var $table = $(table);
-      // Only trigger if we have actual data rows in the table.
-      // Calling on an empty table throws a javascript error.
-      if ($table.find('tbody tr').length) {
-        $table.tablesorter();
-      }
-    });
+  horizon.datatables.add_table_checkboxes($('body'));
+  horizon.datatables.set_table_sorting($('body'));
 
-  // Add a select all checkbox at table header
-  $('table thead .multi_select_column').append('<input type="checkbox">');
-  $('table thead .multi_select_column :checkbox').click(function(evt) {
-    var $this = $(this),
-        $table = $this.closest('table'),
-        is_checked = $this.prop('checked'),
-        checkboxes = $table.find('tbody :checkbox');
-    checkboxes.prop('checked', is_checked);
+  // Also apply on tables in modal views
+  $('div.modal_wrapper').on('shown', '.modal', function(evt) {
+    horizon.datatables.add_table_checkboxes(this);
+    horizon.datatables.set_table_sorting(this);
   });
 
   horizon.datatables.update();
-  horizon.datatables.init_sorting();
 });

openstack_dashboard/templates/base.html

@@ -27,5 +27,6 @@
     {% block js %}
       {% include "_scripts.html" %}
     {% endblock %}
+    <div class="modal_wrapper" />
   </body>
 </html>