Bug 36347: Avoid return claims table being loaded twice

The issue is caused by these lines in circulation.js:

$("#finesholdsissues a[data-toggle='tab']").on("shown.bs.tab", function(e){
    $(this).click();
});

When the user clicks on a hidden tab, 'shown.bs.tab' is triggered and
then another click event is triggered. And because the table was loaded
on tab click, it was loaded twice.
Visually it could have caused the rows to be duplicated (it was random,
probably due to timing, network latency, ...)

I don't know why we need to trigger a click in this case, but removing
this will probably break something else, so the fix here is to load the
table on 'shown.bs.tab' event instead of 'click'

This patch also contains a small fix in refreshReturnClaimsTable which
was reloading the table right after the table initialization.

Test plan:
1. Check out an item, and in the checkouts table, click "Claim returned"
2. Open the network tab of your browser's developer tools
3. Click on the "Claims" tab, verify that only one call is made to
   svc/return_claims
4. Verify that the claims table is displayed correctly

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
(cherry picked from commit 5783d01af0)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
(cherry picked from commit 4183ec10c0)
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Julian Maurice 2024-03-18 16:07:02 +01:00 committed by Lucas Gass
parent 64542252b0
commit 9dd6228a91

View file

@ -910,15 +910,19 @@ $(document).ready(function() {
issuesTable.api().ajax.reload();
});
// Don't load return claims table unless it is clicked on
// Don't load return claims table unless its tab is shown
var returnClaimsTable;
$("#return-claims-tab").click( function() {
$("#return-claims-tab").on('shown.bs.tab', function() {
refreshReturnClaimsTable();
});
function refreshReturnClaimsTable(){
loadReturnClaimsTable();
$("#return-claims-table").DataTable().ajax.reload();
const table = $('#return-claims-table');
if ($.fn.dataTable.isDataTable(table)) {
table.DataTable().ajax.reload();
} else {
loadReturnClaimsTable();
}
}
function loadReturnClaimsTable() {
if ( ! returnClaimsTable ) {