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>
This commit is contained in:
@@ -5,8 +5,6 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>RailsGoat - OWASP Security Training</title>
|
<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 -->
|
<%#= csrf_meta_tags %> <!-- <~ What is this for? I hear it helps w/ JS and Sea-surfing.....whatevz -->
|
||||||
|
|
||||||
<!-- VULNERABILITY A03:2025 - Software Supply Chain Failures
|
<!-- VULNERABILITY A03:2025 - Software Supply Chain Failures
|
||||||
@@ -16,8 +14,19 @@
|
|||||||
SECURE: Should include integrity="sha384-..." crossorigin="anonymous"
|
SECURE: Should include integrity="sha384-..." crossorigin="anonymous"
|
||||||
See: /tutorials/supply_chain for exploitation details
|
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@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">
|
<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>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Modern Design System -->
|
<!-- Modern Design System -->
|
||||||
@@ -188,7 +197,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* VULNERABILITY: XSS via cookie font-size -->
|
/* VULNERABILITY: XSS via cookie font-size */
|
||||||
<%
|
<%
|
||||||
if cookies[:font]
|
if cookies[:font]
|
||||||
%>
|
%>
|
||||||
|
|||||||
Reference in New Issue
Block a user