From 25bb21be9189847d06c3d25fc2c2f99df5d90935 Mon Sep 17 00:00:00 2001 From: pxpm Date: Fri, 20 Sep 2024 12:21:16 +0100 Subject: [PATCH 1/4] add debounce to filters --- .../views/crud/inc/filters_navbar.blade.php | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php index bd1ee26ebc..996f5650d0 100644 --- a/src/resources/views/crud/inc/filters_navbar.blade.php +++ b/src/resources/views/crud/inc/filters_navbar.blade.php @@ -68,12 +68,39 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa // and we have a function that will do this update for us after all filters had been cleared. if(update_url) { // replace the datatables ajax url with new_url and reload it - crud.table.ajax.url(new_url).load(); + callOnce(function() { refreshDatatablesOnFilterChange(new_url) }, 300, 'refreshDatatablesOnFilterChange'); } return new_url; } + /** + * calls the function func once within the within time window. + * this is a debounce function which actually calls the func as + * opposed to returning a function that would call func. + * + * @param func the function to call + * @param within the time window in milliseconds, defaults to 300 + * @param timerId an optional key, defaults to func + * + * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery + */ + function callOnce(func, within=300, timerId=null){ + window.callOnceTimers = window.callOnceTimers || {}; + if (timerId == null) + timerId = func; + var timer = window.callOnceTimers[timerId]; + clearTimeout(timer); + timer = setTimeout(() => func(), within); + window.callOnceTimers[timerId] = timer; + } + + function refreshDatatablesOnFilterChange(url) + { + // replace the datatables ajax url with new_url and reload it + crud.table.ajax.url(url).load(); + } + function normalizeAmpersand(string) { return string.replace(/&/g, "&").replace(/amp%3B/g, ""); From 406605510ef904cc5f2733cbf219242be867c0e8 Mon Sep 17 00:00:00 2001 From: pxpm Date: Fri, 20 Sep 2024 12:57:22 +0100 Subject: [PATCH 2/4] cleanup function --- .../views/crud/inc/filters_navbar.blade.php | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php index 996f5650d0..082153c50d 100644 --- a/src/resources/views/crud/inc/filters_navbar.blade.php +++ b/src/resources/views/crud/inc/filters_navbar.blade.php @@ -85,14 +85,13 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa * * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery */ - function callOnce(func, within=300, timerId=null){ + function callOnce(func, within = 300, timerId = null) { window.callOnceTimers = window.callOnceTimers || {}; - if (timerId == null) - timerId = func; - var timer = window.callOnceTimers[timerId]; - clearTimeout(timer); - timer = setTimeout(() => func(), within); - window.callOnceTimers[timerId] = timer; + timerId = timerId || func; + if (window.callOnceTimers[timerId]) { + clearTimeout(window.callOnceTimers[timerId]); + } + window.callOnceTimers[timerId] = setTimeout(func, within); } function refreshDatatablesOnFilterChange(url) From b2d15f0c961cf880b51ba05a397bad0a10c3e0eb Mon Sep 17 00:00:00 2001 From: pxpm Date: Fri, 20 Sep 2024 13:00:50 +0100 Subject: [PATCH 3/4] accept debounce parameter --- src/resources/views/crud/inc/filters_navbar.blade.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php index 082153c50d..0fc93f009c 100644 --- a/src/resources/views/crud/inc/filters_navbar.blade.php +++ b/src/resources/views/crud/inc/filters_navbar.blade.php @@ -53,7 +53,7 @@ function addOrUpdateUriParameter(uri, parameter, value) { } - function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false) { + function updateDatatablesOnFilterChange(filterName, filterValue, update_url = false, debounce = 500) { // behaviour for ajax table var current_url = crud.table.ajax.url(); var new_url = addOrUpdateUriParameter(current_url, filterName, filterValue); @@ -68,7 +68,7 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa // and we have a function that will do this update for us after all filters had been cleared. if(update_url) { // replace the datatables ajax url with new_url and reload it - callOnce(function() { refreshDatatablesOnFilterChange(new_url) }, 300, 'refreshDatatablesOnFilterChange'); + callOnce(function() { refreshDatatablesOnFilterChange(new_url) }, debounce, 'refreshDatatablesOnFilterChange'); } return new_url; From 09a22af6ed604cbd2a53f31a72b73def1021a9aa Mon Sep 17 00:00:00 2001 From: pxpm Date: Fri, 20 Sep 2024 13:41:59 +0100 Subject: [PATCH 4/4] rename callOnce function --- src/resources/views/crud/inc/filters_navbar.blade.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php index 0fc93f009c..6a6fd5284e 100644 --- a/src/resources/views/crud/inc/filters_navbar.blade.php +++ b/src/resources/views/crud/inc/filters_navbar.blade.php @@ -68,7 +68,7 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa // and we have a function that will do this update for us after all filters had been cleared. if(update_url) { // replace the datatables ajax url with new_url and reload it - callOnce(function() { refreshDatatablesOnFilterChange(new_url) }, debounce, 'refreshDatatablesOnFilterChange'); + callFunctionOnce(function() { refreshDatatablesOnFilterChange(new_url) }, debounce, 'refreshDatatablesOnFilterChange'); } return new_url; @@ -85,7 +85,7 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa * * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery */ - function callOnce(func, within = 300, timerId = null) { + function callFunctionOnce(func, within = 300, timerId = null) { window.callOnceTimers = window.callOnceTimers || {}; timerId = timerId || func; if (window.callOnceTimers[timerId]) {