0

I am not getting the mask to show up when I am typing a number like it shows on their demo. I am using gem 'maskedinput-rails'.

My code is:

<div class="form-group">
  <label class="control-label col-sm-5" for="phone">Phone Number:</label>
  <div class="col-sm-7">
    <%= f.telephone_field :phone, class: 'form-control', value: number_to_phone(@appointment.phone, area_code: true) %>
  </div>
  <script> 
    jQuery(function($){
    $("#phone").mask("(999) 999-9999");
    });
  </script> 
</div>
J. Titus
  • 9,535
  • 1
  • 32
  • 45
Nuanes
  • 67
  • 1
  • 5
  • Is your selector correct? Does `$('#phone')` give you the phone field? – vee Jan 16 '16 at 23:41
  • My understanding is $('#phone") relates to my variable f.telephone_field :phone, which relates to @appointment.phone. – Nuanes Jan 17 '16 at 00:27
  • It should be working like the Demo link at http://digitalbush.com/projects/masked-input-plugin/ – Nuanes Jan 17 '16 at 00:28
  • When I use plain old it works great. But using <%= f.telephone_field :phone, class: 'form-control', value: number_to_phone(@appointment.phone, area_code: true) %> it does not work. – Nuanes Jan 17 '16 at 01:02
  • Not even <%= f.text_field :phone %> will work but does which is supposed to be the exact same thing. – Nuanes Jan 17 '16 at 01:20

1 Answers1

0

As vee points out, the problem is with your selector. Once you have loaded your page in the browser, you can simply check the source to see what the ID of the text field is. That said, if you did not change FormBuilder configuration, it should be something like #model_attribute, so in your case #appointment_phone. So:

<script> 
  jQuery(function($){
    $("#appointment_phone").mask("(999) 999-9999");
  });
</script>
taglia
  • 1,837
  • 2
  • 13
  • 16
  • You mentioned FormBuilder configuration. I am a newbie to Rails so I am not sure what you are talking about. Are you talking about _form.html.erb? Where do I make a change with #appointment_phone? – Nuanes Jan 17 '16 at 04:00
  • I have edited my answer, and added a link to the FormBuilder doc. – taglia Jan 17 '16 at 04:04
  • Wow! It works but I do not understand why that is the fix. In all the examples I have looked at that surely is not clear at all. Thanks for making my night TWICE! – Nuanes Jan 17 '16 at 04:37