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)
Related
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.
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 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.
I'd like to know how to re-bind validation on my form elements that have been injected in to the page via ajax.
This is the partial view that is rendered to the browser.
<tr>
<td><%= Html.ValidationMessageFor(m => m.FirstName)%><%= Html.EditorFor(m => m.FirstName)%></td>
<td><%= Html.ValidationMessageFor(m => m.LastName)%><%= Html.EditorFor(m => m.LastName)%></td>
<td><%= Html.ValidationMessageFor(m => m.IsAttending)%><%= Html.EditorFor(m => m.IsAttending)%></td>
<td><%= Html.ValidationMessageFor(m => m.Food)%><%= Html.EditorFor(m => m.Food)%></td>
</tr>
I have also looked at MicrosoftMvcValidation.debug.js to see if there's any functions I can call and I've found this;
// register validation
Sys.Application.add_load(function() {
Sys.Application.remove_load(arguments.callee);
Sys.Mvc.FormContext._Application_Load();
});
I've tried calling this code after the ajax call has completed and after the markup is injected in to the DOM, but no cigar.
I have stumbled across this question but It only talks about re-binding validation to an entire form that's been injected via ajax and that didn't help me either.
mvc2-client-validation-isnt-working-when-getting-form-from-ajax-call
I should probably also mention that my partial view is generating duplicate ID's in the DOM. Some pointers on how to get around this would also be much appreciated. Thanks.
ASP.NET MVC Client Side Validation with Dynamic Contents
This was a great starting point. Hope it helps.