I'm learning Rails and i'm building an admin api for my project. There's a _form.html.erb on views that i need to mask some field inputs like this one:
<div class="field">
<%= form.label :cnpj %>
<%= form.text_field :cnpj %>
</div>
Input value: 12345678000123
Display value during input: 12.345.678/0001-23
I have found some solutions involving js and jquery plugins, but i didn't manage to work them out (because i'm not familiar with using js/jquery plugins). What is the best way to mask these fields?
Thanks in advance.
You're going to be using Javascript for that (vanilla, jQuery, Angular, React, etc). There are various ways to pull in a library/framework.
if the model you're using is Company then the form element Id will be 'company_cnpj'
Your element will render as
<input type="text" name="company[cnpj]" id="company_cnpj">
Depending on the library used, you can setup a basic mask with:
$(function() {
$('#company_cnpj').inputmask({ mask: "(123) 456-7890" });
});
https://github.com/RobinHerbots/Inputmask gives you the option to pass in regex directly via a data attributes.
Related
Edited:
I am trying to achieve cascading dropdown.
In my 1st dropdown, I get all the distinct Names.
<%= f.input :names, collection: names.distinctnames, :label => "Select Name" %>
On selecting the name, how to access the value and pass it to controller/model so that I can filter based on the values and bind it to the next dropdown.
In my Model, I have the following scope
scope :distinctnames, ->{ Names.distinct.pluck(:names)}
Here, I want to add another scope that gives the cities for the selected name.
So, how would I get the data selected in my view and get all the values in the next dropdown.
If this is the wrong approach, can someone suggest me the alternative one with and example.
My code
<!DOCTYPE html>
<html>
<head>
<script>
$(document).on('change', '#names_id', function(){
var custId = $(this).val();
return custId;
});
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-primary">
<div class="panle-heading">Panel Primary</div>
<div class="panel-body">
<%= simple_form_for #ruby, url:{action: 'create'}, html: {class: 'form'} do |f| %>
<%= f.select :names_id, options_for_select(Names.distinctnames), {}, {:multiple => true} %>
<%= f.select :city_name, options_for_select(Names.where(names_id: custId).pluck(:city_name)), {}, {:multiple => true} %>
<% end %>
</div>
</div>
</div>
</div>
<div>
</body>
</html>
Here, at the time of loading the the view I get undefined local variable or method `custId' for #<#
How to load the all other dropdowns empty and then bind the value from the selected dropdown value to the second one.
So as I understand, You got more than one drop down list but the got dependency, Like selected value from drop-down list 1 will affect values in drop-down list 2, In this case reaching the controller action will need the form to be submitted, If what I'm thinking about is right I have more than one idea:
First one
You will use javascript or JQuery library to add this dynamic behavior to you page, the scenario is going to be like this:
1- User will select value
2- an actionListner is fired using js when select.
3- send a request to the server
4- get data according to parameters you sent to the server
5- enable the next drop-down list after binding returned data from the server.
This solution won't need you to refresh the page, Which I think will make user satisfied.
Second solution
You will put actionListner on drop-down and submit the form when user select value.
This gonna need a little bit validation in you server-side plus a little bit effort to save data that was filled if there is other inputs(saving them in instance variables I mean like #select_drop_1 and use them in inputs as user gonna feel that values are not missed).
Third solution
If it is applicable that you make this data available once user opened the form, By this I mean grouping this data, Making a query that groups cities by these distinct names, So that when user select a name, a simple js code will run enabling and binding data to the next drop-down and so on.
If I were you I would choose either first or third option, Pardon me because I don't know the schema of your application, I don't know if it is applicable to make grouping I'm imagining that Names got its table and there is another one called City.
Hope it helps.
I have been using simple_form for a few years now, but always either by itself or with Bootstrap. I'm using Foundation in a new project, and I have followed Zurb's instructions for installing the foundation-rails gem. I have also run:
rails g simple_form:install --foundation
And it has created the requisite files.
Now for the confusing part. When I used to generate a controller or a scaffold with simple_form for Bootstrap, it would make the form look great by default.
But when I run those same generators in my new Rails project using simple_form for Foundation, the forms don't appear to be styled at all. The fields stretch all the way across the screen.
Passing in the wrapper HTML classes that are specified in the config/initializers/simple_form_foundation.rb file don't do anything.
For example:
<%= simple_form_for(#organization, html: { class: "horizontal-form" }) do |f| %>
I can see in the HTML source that it is indeed putting "inline-form" as a class on the form, but there's nothing else going on. None of the wrapper stuff around any of the divs is different, it's just plain:
<div class="input string optional organization_official_name">
<label class="string optional" for="organization_official_name">Official Name</label>
<input class="string optional" id="organization_official_name" name="organization[official_name]" type="text" value="Voolith">
</div>
I have not done anything fancy in my application layout yet, other than the nav bar which is using Zurb classes and works perfectly.
I think I am confused on what exactly simple_form is supposed to do here? I don't understand the connection between the configuration in the simple_form.rb and simple_form_foundation.rb files and CSS classes.
Right now, passing the "vertical-form" or "horizontal-form" classes as I have done above doesn't do anything. Isn't simple_form somehow supposed to read that value and render the form differently?
I had this same problem and googling didn't yield quick answers.
I believe instead of
<%= simple_form_for(#organization, html: { class: "horizontal-form" }) do |f| %>
try
<%= simple_form_for(#organization, :wrapper => :horizontal_form) do |f| %>
This references the config.wrappers in config/initializers/simple_form_foundation.rb
I made a rails application, and I used datagrid gem to handle filters, pagination,and orders(ascending and descending). I was supposed to write <%= f.datagrid_filter filter%> to filter according to a filed of the table(Ex:title field in topics table).
Now <%= f.datagrid_filter filter%> returns a traditional html input tag like below. <input id="topic_report_title" class="title string_filter" type="text" size="30" name="topic_report[title]"> in the html console.
Now I want to put placeholder in that helper method only.
Can anybody help please?
Have you tried to do the following: <%= f.datagrid_filter filter, :placeholder => "placeholder text"%>
I`m trying to add autocomplete to a field that is included in a partial view in a Rails 3 app.
I can`t tell JQuery to look for it via form name, since a random attribute is generated every time the field is rendered.
Here's rundown of the code:
cardio_exercises.js.coffee
jQuery ->
$('input.Cardio').autocomplete
source: ['Elliptical trainer','Stair stepper (Stairmaster)','Stationary or recumbent bike','Jacob`s ladder','Arm ergometer (arm cycle)','Rowing machine','Treadmill walking','Treadmill running','Kettlebells','Interval training','Box jumps','Step ups','Plyometrics','Cycling','Jogging','Running','Power walking','Swimming','Water jogging/running','Bleacher running','Spinning','Step aerobics','Walking the dog','Playing with your dog','Taking the stairs','Jumping jacks']
In the partial I added a class of Cardio to the input field:
_cardio_exercise_fields.html.erb
<table>
<tr>
<td>
<b>Exercise Name</b><br>
<%= f.text_field :exercise_name, :class => 'Cardio' %></td>
<td>
<b>Duration</b><br>
<%= f.text_field :duration %> minutes
</td>
</table>
I have no clue about JS/jQuery so I would appriaciate any advice on the matter.
I know that it works (autocomplete) in normal views, just not in the partial in trying to implement it in.
jQuery works normally in Rails3, I mean, once the page is rendered,
$('input.Cardio') // => will get a result: [input.Cardio]
I suggest you install the firebug and watch the error message from its console.
( or developer tool in chrome & safari)
I am trying to use Simplemodal as a pop up box on an index page and put a form to add a new user inside it. It's not working, says there is an undefined method. How do I make this work? Does it have to do with :remote?
EDIT - Here's some code to hopefully explain a little better - from index.html.erb
<div id='basic-modal'>
<input type='button' name='basic' value='Demo' class='basic'/>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<%= render 'form' %>
</div>
My form is the standard scaffold form, my Client model has a place to add some basic information about a client. My controller is the standard controller that is generated with scaffold, and my application.html.erb adds the required .js files. When I take the
<%= render 'form' %>
out and put in just plain text, it works just fine. Does that help?
Although I haven't found the answer to using simplemodal for a modal box, I found this tutorial at Nettus which uses modalbox and facebox:
http://net.tutsplus.com/tutorials/ruby/how-to-build-an-unobtrusive-login-system-in-rails/
With a few changes for rails 3, this helped me put a form inside a modal box with no problems.