Files
railsgoat/app/views/layouts
Ken Johnson 56ad351581 Fix jQuery loading order and Turbolinks compatibility
Fixed critical issues causing JavaScript errors on dashboard pages:

## Problems Fixed

1. **jQuery not defined ($)**
   - jQuery was loading AFTER application.js
   - Scripts in dashboard/home tried to use $ before it was available
   - Error: "Uncaught ReferenceError: $ is not defined"

2. **Turbolinks conflict**
   - Changed data-turbo-track but app still uses turbolinks gem
   - Error: "Cannot set properties of undefined (setting 'Turbolinks')"
   - Both turbolinks and turbo-rails in Gemfile causing conflicts

3. **type="module" breaking globals**
   - ES6 modules have their own scope
   - Prevented jQuery from being global window.$
   - Broke all existing jQuery-dependent code

## Solutions Applied

1. **Script Load Order**
   ```html
   <!-- BEFORE: Wrong order -->
   <%= javascript_include_tag "application" %>
   <script src="jquery.min.js"></script>

   <!-- AFTER: Correct order -->
   <script src="jquery.min.js"></script>
   <%= javascript_include_tag "application" %>
   <script src="bootstrap.bundle.min.js"></script>
   ```

2. **Reverted to Turbolinks**
   ```erb
   <!-- Changed back from: -->
   "data-turbo-track": "reload"

   <!-- To original: -->
   "data-turbolinks-track" => "reload"
   ```

3. **Removed type="module"**
   ```html
   <!-- Before: -->
   <%= javascript_include_tag "application", type: "module" %>

   <!-- After: -->
   <%= javascript_include_tag "application" %>
   ```

## Technical Details

**Script execution order:**
1. jQuery (CDN) - Makes $ available globally
2. Bootstrap CSS (CDN) - Styles load early
3. application.css (Rails) - Custom styles
4. application.js (Rails) - Can now use jQuery
5. Bootstrap JS (CDN) - Needs jQuery, loaded last

**Why this order matters:**
- application.js likely has jQuery dependencies
- Dashboard charts/graphs use jQuery
- Bootstrap 5 JS doesn't require jQuery but loads after for safety
- Turbolinks needs to initialize before page interactions

**Compatibility:**
- Keeps existing jQuery-dependent code working
- Maintains Turbolinks behavior (app has both gems)
- All dashboard statistics/charts now load correctly
- No breaking changes to existing pages

This maintains backward compatibility while preserving the modern UI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-07 00:48:35 -05:00
..