ENH: FormHandler disable onhashchange #127

docs/formhandler.md

@@ -93,6 +93,7 @@ The full list of options is below. Simple options can be specified as `data-` at
       - If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
         - `highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
   - Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
+- `onhashchange`: Re-renders table on hashchange (default `true`)
 - `table`: Shows the table control. Can be:
   - `true`: displays a table (default)
   - `'grid'`: renders a grid instead of a table

src/formhandler.js

@@ -24,7 +24,8 @@ var default_options = {
     json: 'JSON',
     html: 'HTML'
   },
-  filters: true
+  filters: true,
+  onhashchange: true
 }
 var meta_headers = ['filters', 'ignored', 'excluded', 'sort', 'offset', 'limit', 'count']
 
@@ -194,7 +195,8 @@ export function formhandler(js_options) {
     actionHandler($this, options, template)
 
     // Re-render every time the URL changes
-    $(window).on('hashchange', render)
+    if (options.onhashchange)
+      $(window).on('hashchange', render)
     // Initialize
     render()
   })

test/test-formhandler.html

@@ -21,8 +21,7 @@
     }
   </style>
   <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-  <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
-  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../node_modules/lodash/lodash.min.js"></script>
   <script src="../node_modules/moment/min/moment.min.js"></script>
   <script src="../node_modules/numeral/min/numeral.min.js"></script>
@@ -100,6 +99,7 @@
   <div class="fhgrid3" data-table="grid" data-src="formhandler_csv.json" data-classes="formhandler-grid"></div>
   <div class="fhgrid4" data-table="grid" data-src="formhandler_csv.json"></div>
   <div class="fhgrid5" data-table="grid" data-src="formhandler_csv.json"></div>
+  <div class="fhhashchangeoff" data-src="/formhandler-data" data-onhashchange="false"></div>
   <script>
     tape('$().formhandler() basic example works', function (t) {
       $('.formhandler').formhandler({
@@ -1039,7 +1039,6 @@
       })
     })
 
-
     tape('$().formhandler() test the star column with out title option', function (t) {
       var class_count = 2
       var init_class_count = 0
@@ -1064,6 +1063,17 @@
       })
     })
 
+    tape('$().formhandler() test disable onhashchange', function (t) {
+      var hashevents_count = $._data($(window)[0], 'events').hashchange.length
+      t.comment(`hash.1 ${hashevents_count} :`)
+      $('.fhhashchangeoff').formhandler()
+      .on('load', function () {
+        var new_hashevents_count = $._data($(window)[0], 'events').hashchange.length
+        t.equals(hashevents_count, new_hashevents_count)
+        t.end()
+      })
+    })
+
   </script>
 </body>