Properly bind form submit on cluster select

freesound/static/bw-frontend/src/components/asyncSection.js

@@ -12,6 +12,9 @@ const prepareAsyncSections = (container) => {
                 element.innerHTML = req.responseText;
                 // Make sure we initialize sound/pack players inside the async section
                 initializeStuffInContainer(element, true, false);
+
+                // Also trigger event to notify that async section has been loaded (this is currently used in search page to perform some actions)
+                document.dispatchEvent(new Event('async_section_loaded'));
             } else {
                 // Unexpected errors happened while processing request: show toast
                 showToast('Unexpected errors occurred while loading some of the content of this page. Please try again later...')

freesound/static/bw-frontend/src/pages/search.js

@@ -176,14 +176,19 @@ if (sortByElement !== null){
   })
 }
 
-// Make radio cluster elements submit the form when changed
-document.getElementsByName('cid').forEach(radio => { 
-  radio.addEventListener('change', (evt) => {
-    setTimeout(() => {
-      searchFormElement.submit();
-    }, 100);  // Give it a little time to update the radio widget before submitting
-  });
-})
+// Make radio cluster elements submit the form when changed (also when cluster section is loaded asynchronously)
+export const bindClusteringRadioButtonsSubmit = () => {
+  document.getElementsByName('cid').forEach(radio => { 
+    radio.addEventListener('change', (evt) => {
+      setTimeout(() => {
+        searchFormElement.submit();
+      }, 100);  // Give it a little time to update the radio widget before submitting
+    });
+  })
+}
+bindClusteringRadioButtonsSubmit();
+document.addEventListener('async_section_loaded', () => bindClusteringRadioButtonsSubmit());
+
 
 document.body.addEventListener('keydown',  evt => {
   const ENTER_KEY = 13