Generalize solution

Cadasta · Oct 6, 2016 · d212707 · d212707
1 parent b7730cb
commit d212707
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 35 deletions.
diff --git a/cadasta/core/static/js/dataTables.forms.js b/cadasta/core/static/js/dataTables.forms.js
@@ -0,0 +1,37 @@
+'use strict';
+
+// This function should be called for any DataTable inside an HTML form that
+// contains form fields. This ensures that when the form is submitted, any form
+// fields that are hidden because of the DataTable paging/search/filter
+// functionality is still submitted with the form.
+function activateFormFieldsInDataTable(
+  formSelector,  // jQuery selector for the HTML form
+  columnIndex,   // column index in the DataTable that contains the form fields
+  fieldType      // form field type as a string (supported: 'checkbox', 'select')
+) {
+  var form = $(formSelector);
+  form.submit(function() {
+    var cells = $(form).find('.datatable').DataTable().column(columnIndex).nodes();
+    for (var i = 0; i < cells.length; i++) {
+      if (!document.body.contains(cells[i])) {
+        var cell = $(cells[i]);
+        if (fieldType == 'select') {
+          var select = cell.find('select');
+          if (select.length > 0) {
+            form.append('<input type="hidden" name="' + select[0].name + '" value="' + select.val() + '" />');
+          }
+        }
+        else if (fieldType == 'checkbox') {
+          var checkbox = cell.find('input[type="checkbox"]')[0];
+          if (checkbox && checkbox.checked) {
+            form.append('<input type="hidden" name="' + checkbox.name + '" value="on" />');
+          }
+        }
+        else {
+          console.log('activateFormFieldsInDataTables: "' + fieldType + '" is not supported.');
+        }
+      }
+    }
+    return true;
+  });
+}
diff --git a/cadasta/templates/organization/organization_members_edit.html b/cadasta/templates/organization/organization_members_edit.html
@@ -2,13 +2,13 @@
 
 {% load i18n %}
 {% load widget_tweaks %}
+{% load staticfiles %}
 
 {% block page_title %}{% trans "Edit member" %} | {% endblock %}
 
 {% block left-nav %}members{% endblock %}
 
 {% block content %}
-
 <div class="col-md-12 content-single">
   <div class="row">
     <!-- Main text  -->
@@ -109,20 +109,11 @@ <h3>{% trans "Member Permissions" %}</h3>
 {% endblock %}
 
 {% block extra_script %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
 <script>
   'use strict';
   $(function() {
-    var form = $('.org-member-edit');
-    form.submit(function() {
-      var cells = $('.panel-body .datatable').DataTable().column(1).nodes();
-      for (var i = 0; i < cells.length; i++) {
-        if (!document.body.contains(cells[i])) {
-          var select = $(cells[i]).find('select');
-          form.append('<input type="hidden" name="' + select[0].name + '" value="' + select.val() + '" />');
-        }
-      }
-      return true;
-    });
+    activateFormFieldsInDataTable('.org-member-edit', 1, 'select');
   });
 </script>
 {% endblock %}

diff --git a/cadasta/templates/organization/project_add_permissions.html b/cadasta/templates/organization/project_add_permissions.html
@@ -1,7 +1,8 @@
 {% extends "organization/project_add_wrapper.html" %}
 
-{% load widget_tweaks %}
 {% load i18n %}
+{% load widget_tweaks %}
+{% load staticfiles %}
 
 {% block page_title %}| {% trans "Assign team" %}{% endblock %}
 
@@ -74,3 +75,13 @@
     <!-- / main wizard  -->
 
 {% endblock %}
+
+{% block extra_script %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
+<script>
+  'use strict';
+  $(function() {
+    activateFormFieldsInDataTable('.container-fluid form', 2, 'select');
+  });
+</script>
+{% endblock %}
diff --git a/cadasta/templates/organization/project_edit_permissions.html b/cadasta/templates/organization/project_edit_permissions.html
@@ -1,8 +1,8 @@
 {% extends "organization/project_wrapper.html" %}
 
-{% load staticfiles %}
 {% load i18n %}
 {% load widget_tweaks %}
+{% load staticfiles %}
 
 {% block page_title %}{% trans "Edit member permissions" %} | {% endblock %}
 
@@ -13,7 +13,6 @@
 {% block left-nav %}overview{% endblock %}
 
 {% block content %}
-
 <form method="POST" action="{% url 'organization:project-edit-permissions' project.organization.slug project.slug %}" novalidate>
 {% csrf_token %}
   <div class="col-md-12 content-single">
@@ -45,5 +44,14 @@ <h2>{% trans "Edit member permissions" %}</h2>
     </div>
   </div>
 </form>
+{% endblock %}
 
+{% block extra_script %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
+<script>
+  'use strict';
+  $(function() {
+    activateFormFieldsInDataTable('.container-fluid form', 2, 'select');
+  });
+</script>
 {% endblock %}
diff --git a/cadasta/templates/party/relationship_resources_add.html b/cadasta/templates/party/relationship_resources_add.html
@@ -1,10 +1,12 @@
 {% extends "party/relationship_detail.html" %}
 {% load i18n %}
+{% load staticfiles %}
 
 {% block page_title %}{% trans "Add new resource for relationship" %} | {% endblock %}
 
 {% block location_extra_script %}
-  {% include 'resources/script_add_lib.html' %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
+{% include 'resources/script_add_lib.html' %}
 {% endblock %}
 
 {% block modals %}

diff --git a/cadasta/templates/party/resources_add.html b/cadasta/templates/party/resources_add.html
@@ -1,10 +1,12 @@
 {% extends "party/party_detail.html" %}
 {% load i18n %}
+{% load staticfiles %}
 
 {% block page_title %}{% trans "Add new resource for party" %} | {% endblock %}
 
 {% block extra_script %}
-  {% include 'resources/script_add_lib.html' %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
+{% include 'resources/script_add_lib.html' %}
 {% endblock %}
 
 {% block modals %}

diff --git a/cadasta/templates/resources/project_add_existing.html b/cadasta/templates/resources/project_add_existing.html
@@ -1,10 +1,12 @@
 {% extends "resources/project_list.html" %}
 {% load i18n %}
+{% load staticfiles %}
 
 {% block page_title %}{% trans "Add new resource for project" %} | {% endblock %}
 
 {% block extra_script %}
-  {% include 'resources/script_add_lib.html' %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
+{% include 'resources/script_add_lib.html' %}
 {% endblock %}
 
 {% block modals %}

diff --git a/cadasta/templates/resources/script_add_lib.html b/cadasta/templates/resources/script_add_lib.html
@@ -1,23 +1,12 @@
   <script>
     'use strict';
     $(function() {
-      var form = $('.modal form');
-      form.submit(function() {
-        var cells = $('.modal .datatable').DataTable().column().nodes();
-        for (var i = 0; i < cells.length; i++) {
-          var checkbox = cells[i].childNodes[0];
-          if (checkbox.checked) {
-            checkbox.checked = false;
-            form.append('<input type="hidden" name="' + checkbox.name + '" value="on" />');
-          }
+      activateFormFieldsInDataTable('.modal form', 0, 'checkbox');
+
+      $('.modal .datatable tr').click(function(event) {
+        if (event.target.type !== 'checkbox') {
+          $(':checkbox', this).trigger('click');
         }
-        return true;
       });
-
-       $('.modal .datatable tr').click(function(event) {
-            if (event.target.type !== 'checkbox') {
-                $(':checkbox', this).trigger('click');
-            }
-       });
     });
   </script>
diff --git a/cadasta/templates/spatial/resources_add.html b/cadasta/templates/spatial/resources_add.html
@@ -1,10 +1,12 @@
 {% extends "spatial/location_detail.html" %}
 {% load i18n %}
+{% load staticfiles %}
 
 {% block page_title %}{% trans "Add new resource for location" %} | {% endblock %}
 
 {% block location_extra_script %}
-  {% include 'resources/script_add_lib.html' %}
+<script src="{% static 'js/dataTables.forms.js' %}"></script>
+{% include 'resources/script_add_lib.html' %}
 {% endblock %}
 
 {% block modals %}