Ruby on Rails - Why is Materialize.updateTextFields not a function?
I have a Ruby on Rails project that uses gem material-saas
. I recently noticed that the textbox animation stopped working. More specifically, when the text box is active, the label does not move up the page, and whatever the user enters into the input box writes the label text and looks terrible. Here (https://github.com/Dogfalo/materialize/issues/682) is an example of a styling issue I'm running into. In addition to not moving the label text correctly, the form also has a file box that doesn't work. When the user selects a file to upload, the file name is not displayed on the form, which is the intended behavior.
I recently launched rake assets:clobber
and rake assets:precompile
, and I am wondering if this is related to this issue.
I did some research and in the Material CSS docs they say:
You can also call a function
Materialize.updateTextFields();
to re-initialize all Materialize shortcuts on the page if you are dynamically adding inputs.
I tried to fix this, but I am getting Uncaught TypeError: Materialize.updateTextFields is not a function
in the console when I load the page.
Here's my view of the form:
<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for @photo, multiple: true do |f| %>
<div class="input-field">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="input-field">
<%= f.label :caption %>
<%= f.text_area :caption, class: "materialize-textarea" %>
</div>
<%= f.label :date %>
<%= f.date_field :date, class: "datepicker"%>
<div class="file-field input-field">
<div class="btn waves-effect waves-light yellow accent-4 white-text">
<span>File</span>
<%= f.file_field :image %>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field center-align">
<%= f.submit "Upload", class: "btn-large waves-effect waves-light" %>
</div>
<% end %>
Here are my assets /application.js
//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .
Here are my assets / custom.js
$(document).ready(function() {
Materialize.updateTextFields();
});
This is really weird because I know the shape style animation works. I have not changed the code for my form. The only thing I can think of is the clobber / precompile command I needed to run to get some ui improvements in production.
Thanks for taking the time to watch this and I appreciate the help!
source to share
Looks like a couple of questions to me:
The rails are magic and it does something called "turbolinks". Basically, pages are dynamically replaced instead of actually changing pages. This makes your site faster, but doesn't always fire the same Javascript events.
You will also need jQuery 2 (I updated my answer after consulting with Dmitry).
Change the first few lines of your JS application to:
//= require jquery2
//= require turbolinks
//= require materialize-sprockets
Secondly, I found a second error that exists in the materialization library. Basically, it wouldn't detect updateTextFields()
until the turbo links loaded the page. To fix this, I submitted a PR , but in the meantime, I would spend money on this by copying / pasting the method from the source into your code (inside $(document).ready
). Use something like this to keep your code updated after the bug is fixed (pretty much a polyfill).
Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js
source to share
You are using jQuery 1.x.
Try using jQuery 2.x or 3.x.
Source: https://github.com/Dogfalo/materialize/issues/4593
E: The way to do it in your setup is to change the line //= require jquery
to //= require jquery2
.
source to share