Remove scope issue for js variables in course_detail.html by moving dataTable call...

diff --git a/karmaworld/assets/js/course-detail.js b/karmaworld/assets/js/course-detail.js
index 94871a6d7338800ba55a024fd60b089428fd0163..d50fb2a36a5a18d03ccc19a7abddc8fca659aa9f 100644 (file)
--- a/karmaworld/assets/js/course-detail.js
+++ b/karmaworld/assets/js/course-detail.js
@@ -97,4 +97,72 @@ $(function() {
   KARMAWORLD.Course.initCourseNameAutocomplete({});
   KARMAWORLD.Course.initInstructorNameAutocomplete({});
 
+  $('#data_table_list').dataTable({
+    // remove the default filter label
+    'oLanguage': {
+      'sSearch': '',
+    },
+    // we will set column widths explicitly
+    'bAutoWidth': false,
+    // don't provide a option for the user to change the table page length
+    'bLengthChange': false,
+    // sepcify the number of rows in a page
+    'iDisplayLength': 20,
+    // Position the filter bar at the top
+    // DIFF: do not show search bar (f)
+    'sDom': '<"top">rt<"bottom"p><"clear">',
+    // Specify options for each column
+    "aoColumnDefs": [
+      {
+        // 3rd element: likes
+        "aTargets": [ 2 ],
+        "bSortable": true,
+        "bVisible": true,
+        "mData": function ( source, type, val ) {
+          //console.log(source);
+          if (type === 'set') {
+            source.count = val;
+            // Store the computed dislay and filter values for efficiency
+            // DIFF: label name change.
+            source.count_display = val=="" ? "" : "<span>"+val+" Thanks</span>";
+            return;
+          }
+          else if (type === 'display') {
+            return source.count_display;
+          }
+          // 'sort', 'type', 'filter' and undefined all just use the integer
+          return source.count;
+        }
+      },
+      {
+        // 2nd element: date
+        "aTargets": [ 1 ],
+        "bSortable": true,
+        "bVisible": true,
+        "mData": function ( source, type, val ) {
+          //console.log(source);
+          if (type === 'set') {
+            source.date = val;
+            // DIFF: label name change.
+            source.date_display = val=="" ? "" : "<span>Uploaded "+val+"</span>";
+            return;
+          }
+          else if (type === 'display') {
+            return source.date_display;
+          }
+          // for types 'sort', 'type', 'filter' and undefined use raw date
+          return source.date;
+        }
+      },
+      {
+        // 1st element: "sort by" label
+        "aTargets": [ 0 ],
+        "bSortable": false,
+        "bVisible": true
+      }
+    ],
+    // Initial sorting
+    'aaSorting': [[2,'desc']]
+  });
+
 });

diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index 4b5d0aa61f5cf25a6f33510eb122c6407e03d780..abb97875500dbb0208d389458c1472be0123ebe9 100644 (file)
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -9,81 +9,11 @@
   <script src="{{ STATIC_URL }}js/course-detail.js" ></script>
   <script src="{{ STATIC_URL }}js/jquery.dataTables.min.js" ></script>
   <script>
-  $(document).ready(function () {
     var json_school_course_list = "{% url 'json_school_course_list' %}";
     var json_school_course_instructor_list = "{% url 'json_school_course_instructor_list' %}";
     var csrf_token = "{{ csrf_token }}";
     var course_flag_url = "{% url 'flag_course' course.id %}";
     var course_edit_url = "{% url 'edit_course' course.id %}";
-
-    $('#data_table_list').dataTable({
-      // remove the default filter label
-      'oLanguage': {
-        'sSearch': '',
-      },
-      // we will set column widths explicitly
-      'bAutoWidth': false,
-      // don't provide a option for the user to change the table page length
-      'bLengthChange': false,
-      // sepcify the number of rows in a page
-      'iDisplayLength': 20,
-      // Position the filter bar at the top
-      // DIFF: do not show search bar (f)
-      'sDom': '<"top">rt<"bottom"p><"clear">',
-      // Specify options for each column
-      "aoColumnDefs": [
-        {
-          // 3rd element: likes
-          "aTargets": [ 2 ],
-          "bSortable": true,
-          "bVisible": true,
-          "mData": function ( source, type, val ) {
-            //console.log(source);
-            if (type === 'set') {
-              source.count = val;
-              // Store the computed dislay and filter values for efficiency
-              // DIFF: label name change.
-              source.count_display = val=="" ? "" : "<span>"+val+" Thanks</span>";
-              return;
-            }
-            else if (type === 'display') {
-              return source.count_display;
-            }
-            // 'sort', 'type', 'filter' and undefined all just use the integer
-            return source.count;
-          }
-        },
-        {
-          // 2nd element: date
-          "aTargets": [ 1 ],
-          "bSortable": true,
-          "bVisible": true,
-          "mData": function ( source, type, val ) {
-            //console.log(source);
-            if (type === 'set') {
-              source.date = val;
-              // DIFF: label name change.
-              source.date_display = val=="" ? "" : "<span>Uploaded "+val+"</span>";
-              return;
-            }
-            else if (type === 'display') {
-              return source.date_display;
-            }
-            // for types 'sort', 'type', 'filter' and undefined use raw date
-            return source.date;
-          }
-        },
-        {
-          // 1st element: "sort by" label
-          "aTargets": [ 0 ],
-          "bSortable": false,
-          "bVisible": true
-        }
-      ],
-      // Initial sorting
-      'aaSorting': [[2,'desc']]
-    });
-  });
   </script>
 {% endblock %}