fix ajax not adding onclick listener when loading dynamically

app/controllers/group_order_invoices_controller.rb

@@ -59,6 +59,7 @@ class GroupOrderInvoicesController < ApplicationController
 
   def select_sepa_sequence_type
     @group_order_invoice = GroupOrderInvoice.find(params[:id])
+    @group_order = @group_order_invoice.group_order
     return unless params[:sepa_sequence_type]
 
     respond_to do |format|

app/views/group_order_invoices/_collective_direct_debit.html.haml

@@ -1,64 +1,6 @@
 - if foodsoft_sepa_ready?
   = link_to 'Sammellastschrift für alle (.xml)', collective_direct_debit_order_path(id: order.id, mode: 'all'), class: 'btn btn-block'
-  = link_to 'Sammellastschrift für ausgewählt (.xml)', collective_direct_debit_order_path(id: order.id, mode: 'selected'), remote: true, class: 'btn btn-block', data: { turbolinks: true }, id: "collective-direct-debit-link-#{order.id}"
+  = link_to 'Sammellastschrift für ausgewählt (.xml)', collective_direct_debit_order_path(id: order.id, mode: 'selected'), class: 'btn btn-block', data: { turbolinks: false }, id: "collective-direct-debit-link-#{order.id}"
 - else
   %i
     = t('activerecord.attributes.group_order_invoice.links.sepa_not_ready')
-- content_for :javascript do
-  :javascript
-    $(document).off('click', "#collective-direct-debit-link-#{order.id}").on('click', "#collective-direct-debit-link-#{order.id}", function(e) {
-      e.preventDefault();
-      // Extract selected group_order_ids
-      var selectedGroupOrderIds = $('input[name^="group_order_ids_for_order_#{order.id}"]:checked').map(function() {
-        return $(this).val();
-      }).get();
-
-      // Log the selected IDs (for testing purposes)
-      console.log('Selected Group Order IDs:', selectedGroupOrderIds);
-      var url = $(this).closest('a').attr('href');
-      //suppress generic error warning
-      $.ajaxSetup({
-      global: false,
-      });
-      $.ajax({
-        url: url,
-        method: 'GET', // You may adjust the HTTP method as needed
-        data: { group_order_ids: selectedGroupOrderIds },
-        dataType: 'xml',
-        success: function(response) {
-          // Handle success response
-          console.log('AJAX request successful:', response);
-          // Convert XML response to a Blob
-          var blob = new Blob([new XMLSerializer().serializeToString(response)], { type: 'text/xml' });
-
-          // Create a temporary link element
-          var link = document.createElement('a');
-          link.href = URL.createObjectURL(blob);
-
-          if(selectedGroupOrderIds.length > 1){
-            link.download = "#{order.supplier.name}-Sammellastschrift.xml";
-          } else {
-            link.download = "#{order.supplier.name}-Lastschrift.xml";
-          }
-
-          // Append the link to the document and trigger the click event
-          document.body.appendChild(link);
-          link.click();
-
-          // Clean up
-          document.body.removeChild(link);
-          $("group-order-invoices-for-order-#{order.id}" + " .expand-trigger a").click();
-
-        },
-        error: function(error) {
-          // Handle error
-          if (error.responseJSON) {
-            alert('AJAX request error:' + "\n" + error.responseJSON.message);
-          } else{
-            var errorText = JSON.parse(error.responseText).error;
-            var alertDiv = '<div class="alert fade in alert-error"><button class="close" data-dismiss="alert">×</button>' + errorText + '</div>';
-            $('.page-header').before(alertDiv);
-          }
-        }
-      });
-    });

app/views/group_order_invoices/_links.html.haml

@@ -34,7 +34,7 @@
               = render :partial => "group_order_invoices/toggle_sepa_downloaded", locals: { group_order_invoice: go.group_order_invoice }
           %td
             .div{id: "select_sepa_sequence_type_#{go.group_order_invoice.id}"}
-              =render :partial => 'group_order_invoices/select_sepa_sequence_type', locals:{ group_order_invoice: go.group_order_invoice }
+              =render :partial => 'group_order_invoices/select_sepa_sequence_type', locals:{ group_order_invoice: go.group_order_invoice, group_order: go }
           %td
             = check_box_tag "group_order_ids_for_order_#{order.id}", go.id, false, class: "group-order-checkbox", id: "group_order_#{go.id}_included_in_sepa", data: { order_id: go.id }
           %td
@@ -64,6 +64,7 @@
           .div{id: "select_all_sepa_sequence_type_#{order.id}"}
             = render :partial => 'group_order_invoices/select_all_sepa_sequence_type', locals: { order: order }
         %td
+          .div{id: "select_all_sepa_#{order.id}"}
             = render :partial => 'group_order_invoices/collective_direct_debit', locals: { order: order }
         %td
           = link_to I18n.t('activerecord.attributes.group_order_invoice.links.download_all_zip'), download_all_group_order_invoices_path(order), class: 'btn btn-block'

app/views/group_order_invoices/_modal.html.haml

@@ -1,2 +1,97 @@
 .div{id: "order_#{order.id}_modal"}
   = render :partial => 'group_order_invoices/links', locals: { order: order }
+- content_for :javascript do
+  :javascript
+    $(document).ready(function() {
+      $("#order_#{order.id}_modal").on('click', "#collective-direct-debit-link-#{order.id}", function(e) {
+        e.preventDefault();
+        console.log("hi");
+        // Extract selected group_order_ids
+        var selectedGroupOrderIds = $('input[name^="group_order_ids_for_order_#{order.id}"]:checked').map(function() {
+          return $(this).val();
+        }).get();
+
+        // Log the selected IDs (for testing purposes)
+        console.log('Selected Group Order IDs:', selectedGroupOrderIds);
+        var url = $(this).closest('a').attr('href');
+        //suppress generic error warning
+        $.ajaxSetup({
+        global: false,
+        });
+        $.ajax({
+          url: url,
+          method: 'GET', // You may adjust the HTTP method as needed
+          data: { group_order_ids: selectedGroupOrderIds },
+          dataType: 'xml',
+          success: function(response) {
+            // Handle success response
+            console.log('AJAX request successful:', response);
+            // Convert XML response to a Blob
+            var blob = new Blob([new XMLSerializer().serializeToString(response)], { type: 'text/xml' });
+
+            // Create a temporary link element
+            var link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+
+            if(selectedGroupOrderIds.length > 1){
+              link.download = "#{order.supplier.name}-#{order.id}-Sammellastschrift.xml";
+            } else {
+              link.download = "#{order.supplier.name}-#{order.id}-Lastschrift.xml";
+            }
+
+            // Append the link to the document and trigger the click event
+            document.body.appendChild(link);
+            link.click();
+
+            // Clean up
+            document.body.removeChild(link);
+            $("group-order-invoices-for-order-#{order.id}" + " .expand-trigger a").click();
+
+          },
+          error: function(error) {
+            // Handle error
+            if (error.responseJSON) {
+              alert('AJAX request error:' + "\n" + error.responseJSON.message);
+            } else{
+              var errorText = JSON.parse(error.responseText).error;
+              var alertDiv = '<div class="alert fade in alert-error"><button class="close" data-dismiss="alert">×</button>' + errorText + '</div>';
+              $('.page-header').before(alertDiv);
+            }
+          }
+        });
+      });});
+
+- content_for :javascript do
+  :javascript
+    $("#order_#{order.id}_modal").off('change', ".ajax-update-all-link-#{order.id} select").on('change', ".ajax-update-all-link-#{order.id} select", function() {
+      var selectedValue = $(this).val();
+      var url = $(this).closest('a').attr('href');
+      $.ajax({
+        url: url,
+        method: 'PATCH',
+        data: { sepa_sequence_type: selectedValue },
+        success: function(response) {
+          // Handle success response
+        },
+        error: function(error) {
+          console.log(error);
+        }
+      });})
+
+- order.group_orders.each do |group_order|
+  - content_for :javascript do
+    :javascript
+      $(document).off('change', ".ajax-update-link-#{group_order.id} select").on('change', ".ajax-update-link-#{group_order.id} select", function() {
+        var selectedValue = $(this).val();
+        var url = $(this).closest('a').attr('href');
+        $.ajax({
+          url: url,
+          method: 'PATCH',
+          data: { sepa_sequence_type: selectedValue },
+          success: function(response) {
+            // Handle success response
+          },
+          error: function(error) {
+            // Handle error
+          }
+        });})

app/views/group_order_invoices/_select_all_sepa_sequence_type.html.haml

@@ -1,19 +1,2 @@
 = link_to select_all_sepa_sequence_type_group_order_invoices_path(order_id: order.id), remote: true, method: :patch, class: "ajax-update-all-link-#{order.id}" , data: { turbolinks: false } do
   = select_tag 'sepa_sequence_type', options_for_select(GroupOrderInvoice.sequence_types.keys.map { |st| [I18n.t("activerecord.attributes.group_order_invoice.sequence_type.#{st}"), st] }, selected: @sequence_type || order.group_orders.map(&:group_order_invoice)&.compact&.first.sepa_sequence_type), class: 'form-control', id: "all_sepa_sequence_type_#{order.id}"
-
-- content_for :javascript do
-  :javascript
-    $(document).off('change', ".ajax-update-all-link-#{order.id} select").on('change', ".ajax-update-all-link-#{order.id} select", function() {
-      var selectedValue = $(this).val();
-      var url = $(this).closest('a').attr('href');
-      $.ajax({
-        url: url,
-        method: 'PATCH',
-        data: { sepa_sequence_type: selectedValue },
-        success: function(response) {
-          // Handle success response
-        },
-        error: function(error) {
-          console.log(error);
-        }
-      });})

app/views/group_order_invoices/_select_sepa_sequence_type.html.haml

@@ -1,19 +1,2 @@
-= link_to select_sepa_sequence_type_group_order_invoice_path(group_order_invoice), remote: true, method: :patch, class: "ajax-update-link-#{group_order_invoice.id}", data: { turbolinks: false } do
+= link_to select_sepa_sequence_type_group_order_invoice_path(group_order_invoice), remote: true, method: :patch, class: "ajax-update-link-#{group_order.id}", data: { turbolinks: false } do
-  = select_tag 'sepa_sequence_type', options_for_select(GroupOrderInvoice.sequence_types.keys.map { |st| [I18n.t("activerecord.attributes.group_order_invoice.sequence_type.#{st}"), st] }, selected: group_order_invoice.sepa_sequence_type ), class: 'form-control', id: "sepa_sequence_type_#{group_order_invoice.id}"
+  = select_tag 'sepa_sequence_type', options_for_select(GroupOrderInvoice.sequence_types.keys.map { |st| [I18n.t("activerecord.attributes.group_order_invoice.sequence_type.#{st}"), st] }, selected: group_order_invoice.sepa_sequence_type ), class: 'form-control', id: "sepa_sequence_type_#{group_order.id}"
-
-- content_for :javascript do
-  :javascript
-    $(document).off('change', ".ajax-update-link-#{group_order_invoice.id} select").on('change', ".ajax-update-link-#{group_order_invoice.id} select", function() {
-      var selectedValue = $(this).val();
-      var url = $(this).closest('a').attr('href');
-      $.ajax({
-        url: url,
-        method: 'PATCH',
-        data: { sepa_sequence_type: selectedValue },
-        success: function(response) {
-          // Handle success response
-        },
-        error: function(error) {
-          // Handle error
-        }
-      });})

app/views/group_order_invoices/_toggle_all_payed.html.haml

@@ -1,2 +1,2 @@
 = link_to toggle_all_payed_group_order_invoices_path(order_id: order.id, payed: order.group_orders.map(&:group_order_invoice).compact.map(&:payed)&.all? ), remote: true, method: :patch, data: { confirm: I18n.t('ui.confirm_mark_all', name: "payed" ) } do
-  = check_box_tag :payed, '1', order.group_orders.map(&:group_order_invoice).compact.map(&:payed)&.all? , class: 'form-check-input'
+  = check_box_tag :payed, '1', order.group_orders.map(&:group_order_invoice).compact.map(&:payed)&.all? , class: 'form-check-input', id: "payed_all_#{order.id}"

app/views/group_order_invoices/_toggle_all_sepa_downloaded.html.haml

@@ -1,2 +1,2 @@
 = link_to toggle_all_sepa_downloaded_group_order_invoices_path(order_id: order.id, sepa_downloaded: order.group_orders.map(&:group_order_invoice).compact.map(&:sepa_downloaded)&.all? ), remote: true, method: :patch, data: { confirm: I18n.t('ui.confirm_mark_all', name: "sepa_downloaded" ) } do
-  = check_box_tag :sepa_downloaded, '1', order.group_orders.map(&:group_order_invoice).compact.map(&:sepa_downloaded)&.all? , class: 'form-check-input'
+  = check_box_tag :sepa_downloaded, '1', order.group_orders.map(&:group_order_invoice).compact.map(&:sepa_downloaded)&.all? , class: 'form-check-input', id: "sepa_downloaded_all_#{order.id}"

app/views/group_order_invoices/create_multiple.js.erb

@@ -1 +1,2 @@
+
 $("#order_<%= @order.id %>_modal").html("<%= escape_javascript(render partial: 'links', locals: {order: @order}) %>");

app/views/group_order_invoices/select_sepa_sequence_type.js.erb

@@ -1 +1 @@
-$("#select_sepa_sequence_type_<%= @group_order_invoice.id %>").html("<%= j(render partial: 'select_sepa_sequence_type', locals: {group_order_invoice: @group_order_invoice}) %>");
+$("#select_sepa_sequence_type_<%= @group_order_invoice.id %>").html("<%= j(render partial: 'select_sepa_sequence_type', locals: {group_order_invoice: @group_order_invoice, group_order: @group_order}) %>");

app/views/orders/collective_direct_debit.js.erb

@@ -1 +0,0 @@
-$("#order_<%= @order.id %>_modal").html("<%= escape_javascript(render partial: 'group_order_invoices/links', locals: {order: @order}) %>");

spec/integration/group_order_invoices_spec.rb

@@ -47,6 +47,7 @@ feature GroupOrderInvoice, type: :feature, js: true do
     click_link_or_button 'Toggle details'
     expect(page).to have_selector(:link_or_button, I18n.t('activerecord.attributes.group_order_invoice.links.generate'))
     click_link_or_button I18n.t('activerecord.attributes.group_order_invoice.links.generate')
+    sleep 1
     expect(GroupOrderInvoice.all.count).to eq(1)
   end
 
@@ -62,6 +63,7 @@ feature GroupOrderInvoice, type: :feature, js: true do
     expect(page).to have_selector(:link_or_button, I18n.t('activerecord.attributes.group_order_invoice.links.generate_with_date'))
 
     click_link_or_button I18n.t('activerecord.attributes.group_order_invoice.links.generate_with_date')
+    sleep 1
     expect(GroupOrderInvoice.all.count).to eq(1)
   end