Trigger cluster selection submit from search.js

MTG · Mar 5, 2024 · e26fcc7 · e26fcc7
1 parent e6fbc2a
commit e26fcc7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/freesound/static/bw-frontend/src/pages/search.js b/freesound/static/bw-frontend/src/pages/search.js
@@ -168,13 +168,23 @@ searchFormElement.getElementsByClassName('bw-checkbox').forEach(checkbox => {
   checkbox.parentNode.appendChild(hiddenCheckbox);
 });
 
+// Make the search select element submit the form when changed
 var sortByElement = document.getElementById('id_sort_by');
 if (sortByElement !== null){
   sortByElement.addEventListener('change', function() {
     searchFormElement.submit();
   })
 }
 
+// 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
+  });
+})
+
 document.body.addEventListener('keydown',  evt => {
   const ENTER_KEY = 13
   if(evt.keyCode === ENTER_KEY){

diff --git a/templates/search/clustering_results.html b/templates/search/clustering_results.html
@@ -3,7 +3,7 @@
     <div class="row">
         {% for cluster_id, num_sounds, cluster_name, sound_examples in clusters_data %}
         <div class="col-3 col-lg-2 v-spacing-top-2">
-            <label><input onchange="this.form.submit()" class="bw-radio" type="radio" value="{{ cluster_id }}" name="{{ sqp.options.cluster_id.query_param_name }}" {% if cluster_id == sqp.options.cluster_id.value %}checked="checked"{% endif %}>Cluster #{{ forloop.counter }}: {{ cluster_name }}</label>
+            <label><input class="bw-radio" type="radio" value="{{ cluster_id }}" name="{{ sqp.options.cluster_id.query_param_name }}" {% if cluster_id == sqp.options.cluster_id.value %}checked="checked"{% endif %}>Cluster #{{ forloop.counter }}: {{ cluster_name }}</label>
             <div class="text-grey">{{ num_sounds }} sound{{ num_sounds|pluralize }}</div>
         </div>
         {% endfor %}