https://www.meetdaisy.co/assets/controllers/category_subcategory_c…a4c576ee55ff6e4305fc9c2dc35cd75b1342833a.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static values = { 
5    calendarId: String 
6  }
7  
8  static targets = [ 
9    "categorySelect", 
10    "subcategorySelect", 
11    "subcategoryContainer" 
12  ]
13
14  connect() {
15    $(this.categorySelectTarget).on('change', (event) => {
16      this.loadSubcategories()
17    })
18  }
19
20  disconnect() {
21    // Clean up select2 instances and event listeners
22    if (this.categorySelectTarget && window.$) {
23      $(this.categorySelectTarget).off('change')
24      $(this.categorySelectTarget).select2('destroy')
25    }
26    if (this.subcategorySelectTarget && window.$) {
27      $(this.subcategorySelectTarget).select2('destroy')
28    }
29  }
30
31  loadSubcategories() {
32    console.log("loadSubcategories called - function is working!")
33    const categoryIds = $("#event_category_ids").val() || $("#category_ids").val()
34    const url = `/subcategories?category_ids=${categoryIds}`
35    $.ajax({
36      url: url,
37      type: 'GET',
38      success: (data) => {
39        console.log("Subcategories loaded:", data)
40        this.subcategorySelectTarget.innerHTML = data.map(subcategory => `<option value="${subcategory.id}" selected>${subcategory.name}</option>`).join('')
41        $(".subcategoryContainer").removeClass("hidden")
42        this.subcategorySelectTarget.dispatchEvent(new Event('change', { bubbles: true }))
43      }
44    })
45  }
46};