Commit ed696e32 authored by S Anand's avatar S Anand

ENH: FormHandler option to disable onhashchange. Fixes #127 @pratap.vardhan

parent d9984e46
Pipeline #75841 passed with stage
in 2 minutes and 24 seconds
...@@ -93,6 +93,8 @@ The full list of options is below. Simple options can be specified as `data-` at ...@@ -93,6 +93,8 @@ 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: - 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'`. - `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. - 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`: `true` re-renders table on hashchange based on filters in URL
hash. Set `false` to disable listening to hashchange (default `true`)
- `table`: Shows the table control. Can be: - `table`: Shows the table control. Can be:
- `true`: displays a table (default) - `true`: displays a table (default)
- `'grid'`: renders a grid instead of a table - `'grid'`: renders a grid instead of a table
......
...@@ -24,7 +24,8 @@ var default_options = { ...@@ -24,7 +24,8 @@ var default_options = {
json: 'JSON', json: 'JSON',
html: 'HTML' html: 'HTML'
}, },
filters: true filters: true,
onhashchange: true
} }
var meta_headers = ['filters', 'ignored', 'excluded', 'sort', 'offset', 'limit', 'count'] var meta_headers = ['filters', 'ignored', 'excluded', 'sort', 'offset', 'limit', 'count']
...@@ -194,7 +195,8 @@ export function formhandler(js_options) { ...@@ -194,7 +195,8 @@ export function formhandler(js_options) {
actionHandler($this, options, template) actionHandler($this, options, template)
// Re-render every time the URL changes // Re-render every time the URL changes
$(window).on('hashchange', render) if (options.onhashchange)
$(window).on('hashchange', render)
// Initialize // Initialize
render() render()
}) })
......
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
} }
</style> </style>
<script src="../node_modules/jquery/dist/jquery.min.js"></script> <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.bundle.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/lodash/lodash.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/moment/min/moment.min.js"></script>
<script src="../node_modules/numeral/min/numeral.min.js"></script> <script src="../node_modules/numeral/min/numeral.min.js"></script>
...@@ -100,6 +99,7 @@ ...@@ -100,6 +99,7 @@
<div class="fhgrid3" data-table="grid" data-src="formhandler_csv.json" data-classes="formhandler-grid"></div> <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="fhgrid4" data-table="grid" data-src="formhandler_csv.json"></div>
<div class="fhgrid5" 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> <script>
tape('$().formhandler() basic example works', function (t) { tape('$().formhandler() basic example works', function (t) {
$('.formhandler').formhandler({ $('.formhandler').formhandler({
...@@ -1039,7 +1039,6 @@ ...@@ -1039,7 +1039,6 @@
}) })
}) })
tape('$().formhandler() test the star column with out title option', function (t) { tape('$().formhandler() test the star column with out title option', function (t) {
var class_count = 2 var class_count = 2
var init_class_count = 0 var init_class_count = 0
...@@ -1064,6 +1063,17 @@ ...@@ -1064,6 +1063,17 @@
}) })
}) })
tape('$().formhandler() test disable onhashchange', function (t) {
// Get number of event handlers for $(window).on('hashchange')
var hashevents_count = $._data(window, 'events').hashchange.length
$('.fhhashchangeoff').formhandler()
.on('load', function () {
var new_hashevents_count = $._data(window, 'events').hashchange.length
t.equals(hashevents_count, new_hashevents_count)
t.end()
})
})
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment