I have been trying to implement input masking on my site for the phone number field. For some (probably silly) reason I am having trouble getting my code to link with the jQuery plugin. I downloaded the Ruby gem and did all of the steps but my browser is saying that the variables are not defined. I suspect I did not set up the gem correctly.
The main website for the functionality
I have installed the gem into my gemfile and run bundle
I have included the call into my application.js
Then tried to implement it in my code
I know it needs the file: jquery.mask.min.js but cannot link it with my project
If there is any easier way to implement this functionality in Ruby on Rails I'd love to use it!
PS: I am coming back to coding after a long break so I am having trouble doing simple things like this!
<div class="form-group col-md-6">
<label>Phone</label>
<%= f.text_field :phone, class: 'control phone_us', maxlength: 20 %>
</div>
<script type="text/javascript">
$(document).ready(function(){
('.phone_us').mask('(000) 000-0000');
})
</script>
Uncaught TypeError: ".phone_us".mask is not a function
at HTMLDocument.<anonymous> (<anonymous>:3:19)
at mightThrow (jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1:3558)
at process (jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1:3626)
It looks like you are missing a $ in front of ('.phone_us'). Like:
$('.phone_us').mask('(000) 000-0000');
Also, if you're using turbolinks, you'll likely need to listen for the turbolinks:load event, like:
$(document).on "turbolinks:load", ->
alert "page has loaded!"
As stated in the docs under 5.2 Page Change Events.