Fix JS load problem

MDB issue source https://github.com/mdbootstrap/bootstrap-material-design/issues/31 mdb js doesn't get loaded well from head tag, but body.
LizBayardelle · Aug 10, 2019 · 52e4c74 · 52e4c74
1 parent 59b8368
commit 52e4c74
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -20,5 +20,3 @@
 //= require jquery-ui
 //= require activestorage
 //= require font_awesome5
-//= require_tree .
-//= require mdb/mdb.js
diff --git a/app/assets/javascripts/mdb_framework.js b/app/assets/javascripts/mdb_framework.js
@@ -0,0 +1 @@
+//= require mdb/mdb
diff --git a/app/views/hardships/_form.html.erb b/app/views/hardships/_form.html.erb
@@ -18,9 +18,17 @@
     <%= form.text_field :full_name, class: "form-control mb-4", placeholder: "Full Name", required: true %>
   </div>
 
-  <div class="field md-form">
-    <%= form.date_select :date, placeholder: "Today's Date", type: "text", id: "today-date", class: "form-control datepicker" %>
-    <label for="today-date">Today's Date</label>
+  <div class="row">
+    <div class="col-2">
+      <p class="lead my-4">
+        <span class="badge info-color-dark p-2">Today's Date</span>
+      </p>
+    </div>
+    <div class="col-4">
+      <div class="md-form">
+        <%= form.text_field :date, placeholder: "Selected date", class: "form-control datepicker", id: "today-date" %>
+      </div>
+    </div>
   </div>
 
   <div class="row">
@@ -207,5 +215,7 @@
 
 <script>
   // Data Picker Initialization
-  $('.datepicker').pickadate();
+  $(function () {
+    $('.datepicker').pickadate();
+  })
 </script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -9,16 +9,16 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= include_gon %>
-    <%= javascript_include_tag :application %>
     <%= stylesheet_link_tag    'application', media: 'all' %>
+    <%= javascript_include_tag :application %>
     <%= favicon_link_tag %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- reCAPTCHA -->
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 
     <!-- Match Height -->
-    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <%# <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> %>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
 
     <!-- favicons -->
@@ -33,7 +33,8 @@
   </head>
 
   <body>
-
+
+    <%= javascript_include_tag 'mdb_framework'%>
     <div class="non-footer">
       <%= render 'layouts/navbar' %>
       <%= render 'layouts/notifications' %>
@@ -44,6 +45,5 @@
     <%= render 'layouts/footer' %>
 
     <%= yield :additional_js %>
-
   </body>
 </html>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -12,3 +12,5 @@
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
+
+Rails.application.config.assets.precompile += %w( mdb_framework.js )