I would like to find a way to customize the default error html
<div class="field_with_errors"></div>
To take my own classes:
<div class="clearfix error">
<label for="errorInput">Input with error</label>
<div class="input">
<input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text">
<span class="help-inline">Small snippet of help text</span>
</div>
</div>
I have found this railscast from 2007 which uses Rails 2, I believe. http://railscasts.com/episodes/39-customize-field-error. It seems like Rails 3 might have a more friendly way to customize this html?
Also, it doesn't show a way to just add an error class directly to the input like I want.
The method explained in the link you posted is still used today with the vanilla form builders in Rails.
So, if you wanted to wrap your input like you mention, create a method overriding the ActionView::Base.field_error_proc in your environment.rb file for example, like so:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
if instance.error_message.kind_of?(Array)
%(<div class="form-field error">#{html_tag}<small class="error">
#{instance.error_message.join(',')}</small></div).html_safe
else
%(<div class="form-field error">#{html_tag}<small class="error">
#{instance.error_message}</small></div).html_safe
end
end
In the above code, I'm wrapping my input (the #{html_tag}) in a <div class="form-field error>..</div> that's the default used by ZURB Foundation. I'm also using a <small class="error">...</small tag (which is also the foundation default) to display the messages below the input.
However, I recommend using a form builder gem like simple_form. It cleans up your view code quit a bit and allows for the level of customization you require.
Check out the railscast on it here.
Good luck!
Related
I have an input that looks like this:
<%= f.input :email %>
The output I get from formtastic(v3.1.5) and rails(v4.2) looks like this.
<li class="email input required stringish" id="applicant_email_input">
<label for="applicant_email" class="label">Email<abbr title="required">*</abbr></label>
<input maxlength="255" id="applicant_email" type="email" value="davedave#gmail.com" name="applicant[email]">
</li>
What I really want is for formtastic to emit:
<div class="email input required stringish form-group" id="applicant_email_input">
<label for="applicant_email" class=" control-label">Email<abbr title="required">*</abbr></label>
<span class="form-wrapper">
<input maxlength="255" id="applicant_email" type="email" value="davedave#gmail.com" name="applicant[email]" class="form-control">
</span>
</div>
This is what this app emmitted with formtastic(v2.3.1) and formtastic-bootstrap(v3.0.0) and rails(v4.1).
I'd love to just include the gem for formtastic-bootstrap and get that old behavior back, but near as I can tell, formtastic-bootstrap dropped out around formtastic 3.
Now I have an app with a couple thousand calls to f.input, and I need to massage the output coming from formtastic. What's the best way to do that?
Maybe you could use formtastic's custom input? Also, these links might help: https://github.com/justinfrench/formtastic/blob/master/lib/formtastic/helpers/input_helper.rb and https://github.com/justinfrench/formtastic/issues/625.
Specifically, Justin French recommends that you monkey patch your app with an initializer in config/initializers/formtastic_patches.rb that would look something like this:
module Formtastic
module Inputs
module Base
module Wrapping
def input_wrapping(&block)
template.content_tag(:li,
[template.capture(&block), error_html, hint_html].join("\n").html_safe,
wrapper_html_options
)
end
end
end
end
end
And then switch the :li for a :div.
Here is a hacked version of formtastic I have named boomtastic which will do what you want.
(This actually includes all that you require except for the form-wrapper. However, the form-wrapper seems to be an element of bootstrap-formtastic only and not part of formtastic or standard bootstrap. If you really want to have the <span class="form-wrapper">, I think you can add this by editing boomtastic/lib/formtastic/inputs/base/wrapping.rb.)
What about a solution that uses jquery to change your form at page reload?
var ready = function () {
var $input = $('#applicant_email');
var input_html = $input.html();
$input.html('<span class="form-wrapper">' + input_html + '</span>');
}
$(document).on('turbolinks:load', ready);
You need to tell me how you want to select those fields, because in your example you did not include the full html and any explanation of the real problem.
I also see that the other divs have some other classes, that can be done with some easy jquery
Otherwise you can edit that gem
Feels like a dumb question but I do not get it. How can I do fast string concatenation in Angular 2 Dart templates?
I have a seperate html file for my component lets say my_component.html:
Works:
....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...
Works:
....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...
Does not work:
....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...
Does not work:
....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...
Have tried to find an answer in the docs here (https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators) but no luck.
Of course I could use *ngIf on every element which I output conditionally but is there a way for simple string concatenation?
The best way is to declare a getter inside your Component controller that does the concatenation for you, you will get dart syntax support and the html template will looks cleaner.
String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";
<div id="abc">
{{myConcatenation}}
</div>
The last two examples can be made to work easily:
<div id="abc">
<br/>{{order.pickupPlace.email}}
</div>
And:
<div id="abc">
{{order.pickupPlace.name}} {{order.pickupPlace.email}}
</div>
Angular handles this pretty well. If you need some more complicated logic you can move it to the Dart code (but you cannot use HTML there easily).
If you find creating lot of weird logic consider creating more smaller components that can handle this for you.
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 am trying to test a Backbone application running on top of a Rails 3.2.8 one using Cucumber, capybara, capybara-webkit, selenium-webdriver, rspec and jasmine. I am using eco as template engine for the backbone template.
My problem is when I run the scenario using the #javascript tag, wether with capybara-webkit or selenium, the page displayed doesn't contain all the model attribute datas.
Here is the scenario :
#javascript
Scenario : first scenario
Given There is Model with "name" as name and "What is it about ?" as associated questions
When I want to fill the questionnaire
Then I should be on the SPA form
And I should see "name"
And I should see "What is it about?"
The scenario fails on the "And I should see 'what is it about?'" step, the page doesn't show the question, but it shows the "name"
I put several debug statement in my backbone code with console.log and I can see that the model is correct with all its attributes. Moreover it is working in live without issue
The template looks like this : 'show.jst.eco'
<p class="text-info"><%= #model.name %></p>
<form id="quidget-form" class="form-vertical">
<% for question in #model.questions: %>
<div class="issue_field">
<label class="string optional control-label"><%= question.question.question_text %></label>
<div class="control-group text">
<textarea class="text answer" name="question-<%= question.question.id %>" id="question_<%= question.question.id %>" data-question="<%= question.question.question_text %>" rows="3">
</textarea>
</div>
</div>
<% end %>
<div class="controls">
<input type="submit" value="Additional Informations" id="quidget-step-one" class="btn btn-success">
The textarea is displayed but not the label above with the question text
Any idea ? I would like to see this pass so i can test more complicated logic with more steps.
Thanks
I've been doing some research into this sort of things as well. Most of it has been focused around Ember.js instead of Backbone but Pamela Fox just wrote a blog post about testing the Backbone.js frontend for Coursera, it could be helpful http://blog.pamelafox.org/2013/06/testing-backbone-frontends.html Also, have you tried testing with capybara in same manner you would a generic rails application with :js => true? Might be worth trying.
Does anyone know if there are hooks for customizing the output of formtastic?
Currently if I do something like this:
= form.input :name, :label => "Name"
It will render a list item:
<li id="item_name_input" class="string required">
<label for="item_name">Name<abbr title="required">*</abbr></label>
<input type="text" value="" name="item[name]" maxlength="255" id="item_name">
</li>
I want to get rid of the li wrapper (and parent ol) and replace with a div. Can't seem to find anything on the formtastic wiki about this.
Unless you fork formtastic and change this line, I don't think there's any way to do this. Formtastic's philosophy bases on Aaron Gustafson Presentation, which shows this ol way to code forms.
Starting with this commit Formtastic supports modifying and customizing inputs. Also, consider taking a look at SimpleForm, which is less strict about markup and css.