From 56ad351581ee591bd874044a573c811ca7480b6c Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 00:48:35 -0500
Subject: [PATCH] Fix jQuery loading order and Turbolinks compatibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/views/layouts/application.html.erb | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8b18338..3c9e209 100755
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -5,8 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>RailsGoat - OWASP Security Training</title>
 
-  <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %>
-  <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   <%#= csrf_meta_tags %> <!-- <~ What is this for? I hear it helps w/ JS and Sea-surfing.....whatevz -->
 
   <!-- VULNERABILITY A03:2025 - Software Supply Chain Failures
@@ -16,8 +14,19 @@
        SECURE: Should include integrity="sha384-..." crossorigin="anonymous"
        See: /tutorials/supply_chain for exploitation details
   -->
+
+  <!-- Load jQuery FIRST - other scripts depend on it -->
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+
+  <!-- Bootstrap CSS and Icons -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
+
+  <!-- Rails assets - loaded AFTER jQuery -->
+  <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
+  <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
+
+  <!-- Bootstrap JS - loaded last -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
   <!-- Modern Design System -->
@@ -188,7 +197,7 @@
       }
     }
 
-    /* VULNERABILITY: XSS via cookie font-size -->
+    /* VULNERABILITY: XSS via cookie font-size */
 <%
 if cookies[:font]
 %>