Refactor photo management and upload functionality to use HTMX for asynchronous requests

- Updated photo upload handling in `photo_manager.html` and `photo_upload.html` to utilize HTMX for file uploads, improving user experience and reducing reliance on Promises.
- Refactored caption update and primary photo toggle methods to leverage HTMX for state updates without full page reloads.
- Enhanced error handling and success notifications using HTMX events.
- Replaced fetch API calls with HTMX forms in various templates, including `homepage.html`, `park_form.html`, and `roadtrip_planner.html`, to streamline AJAX interactions.
- Improved search suggestion functionality in `search_script.html` by implementing HTMX for fetching suggestions, enhancing performance and user experience.
- Updated designer, manufacturer, and ride model forms to handle responses with HTMX, ensuring better integration and user feedback.

templates/maps/universal_map.html

@@ -293,37 +293,60 @@ class ThrillWikiMap {
         });
     }
     
-    async loadMapData() {
+    loadMapData() {
         try {
             document.getElementById('map-loading').style.display = 'flex';
             
             const formData = new FormData(document.getElementById('map-filters'));
-            const params = new URLSearchParams();
+            const queryParams = {};
             
             // Add form data to params
             for (let [key, value] of formData.entries()) {
-                params.append(key, value);
+                queryParams[key] = value;
             }
             
             // Add map bounds
             const bounds = this.map.getBounds();
-            params.append('north', bounds.getNorth());
-            params.append('south', bounds.getSouth());
-            params.append('east', bounds.getEast());
-            params.append('west', bounds.getWest());
-            params.append('zoom', this.map.getZoom());
+            queryParams.north = bounds.getNorth();
+            queryParams.south = bounds.getSouth();
+            queryParams.east = bounds.getEast();
+            queryParams.west = bounds.getWest();
+            queryParams.zoom = this.map.getZoom();
             
-            const response = await fetch(`{{ map_api_urls.locations }}?${params}`);
-            const data = await response.json();
+            // Create temporary form for HTMX request
+            const tempForm = document.createElement('form');
+            tempForm.setAttribute('hx-get', '{{ map_api_urls.locations }}');
+            tempForm.setAttribute('hx-vals', JSON.stringify(queryParams));
+            tempForm.setAttribute('hx-trigger', 'submit');
+            tempForm.setAttribute('hx-swap', 'none');
             
-            if (data.status === 'success') {
-                this.updateMarkers(data.data);
-            } else {
-                console.error('Map data error:', data.message);
-            }
+            tempForm.addEventListener('htmx:afterRequest', (event) => {
+                try {
+                    const data = JSON.parse(event.detail.xhr.responseText);
+                    
+                    if (data.status === 'success') {
+                        this.updateMarkers(data.data);
+                    } else {
+                        console.error('Map data error:', data.message);
+                    }
+                } catch (error) {
+                    console.error('Failed to load map data:', error);
+                } finally {
+                    document.getElementById('map-loading').style.display = 'none';
+                    document.body.removeChild(tempForm);
+                }
+            });
+            
+            tempForm.addEventListener('htmx:error', (event) => {
+                console.error('Failed to load map data:', event.detail.error);
+                document.getElementById('map-loading').style.display = 'none';
+                document.body.removeChild(tempForm);
+            });
+            
+            document.body.appendChild(tempForm);
+            htmx.trigger(tempForm, 'submit');
         } catch (error) {
             console.error('Failed to load map data:', error);
-        } finally {
             document.getElementById('map-loading').style.display = 'none';
         }
     }
@@ -410,12 +433,27 @@ class ThrillWikiMap {
     }
     
     showLocationDetails(type, id) {
-        htmx.ajax('GET', `{% url 'maps:htmx_location_detail' 'TYPE' 0 %}`.replace('TYPE', type).replace('0', id), {
-            target: '#location-modal',
-            swap: 'innerHTML'
-        }).then(() => {
-            document.getElementById('location-modal').classList.remove('hidden');
+        // Create temporary form for HTMX request
+        const tempForm = document.createElement('form');
+        tempForm.setAttribute('hx-get', `{% url 'maps:htmx_location_detail' 'TYPE' 0 %}`.replace('TYPE', type).replace('0', id));
+        tempForm.setAttribute('hx-target', '#location-modal');
+        tempForm.setAttribute('hx-swap', 'innerHTML');
+        tempForm.setAttribute('hx-trigger', 'submit');
+        
+        tempForm.addEventListener('htmx:afterRequest', (event) => {
+            if (event.detail.successful) {
+                document.getElementById('location-modal').classList.remove('hidden');
+            }
+            document.body.removeChild(tempForm);
         });
+        
+        tempForm.addEventListener('htmx:error', (event) => {
+            console.error('Failed to load location details:', event.detail.error);
+            document.body.removeChild(tempForm);
+        });
+        
+        document.body.appendChild(tempForm);
+        htmx.trigger(tempForm, 'submit');
     }
     
     updateMapBounds() {
@@ -501,4 +539,4 @@ document.addEventListener('DOMContentLoaded', function() {
     border-color: #374151;
 }
 </style>
-{% endblock %}
+{% endblock %}