simple_form radio button (need to add <span> tag inside of <label> - ruby-on-rails-3

What is the best way to create the following HTML using simple_form_for gem?
<label>
<input name="form-field-radio" type="radio" />
**<span class="lbl"> radio option 2</span>**
</label>
Note that by default when I create a radio buttons using the following statements, the above is not created. How can I add that tag in?
<%= f.input :state, :collection => Project::STATES, :as => :radio_buttons %>

I had a similar need (to embed a <span> within the <label>). It isn't the cleanest solution but it did work and I think with some tweaking it could get you the ability to have your input and span embedded within the label. The following modification results in:
<label>Name:
<span class="hint">this is a hint...</span>
</label>
I added the following as an initializer (using rails 4 and simple_form 3) to override the label_text method:
# initializers/simple_form_custom.rb
module SimpleForm
module Components
module Labels
def label_text
if hint
hint_text = %[<span class="hint">#{hint}</span>]
else
hint_text = ""
end
SimpleForm.label_text.call(raw_label_text, required_label_text, hint_text).strip.html_safe
end
end
end
end
Then in initializers/simple_form.rb I have:
config.label_text = lambda { |label, required, hint| "#{label}: #{required} #{hint}" }

Related

I want to change default label YES NO of my checkbox radio_button from my f.input (form_for)

I'm starting using Rails.
In my form_for, I want to change label of default value YES / NO (which appear in my front view)
<div class="row">
<div class="col-sm-6">
<%= f.input :experience,
as: :radio_buttons,
label:"A t-il déjà saillie ?" %>
</div>
</div>
Which option should I add to change label ?
How can I display option in one line ?
Thank you for your help
Are you using simple_form_for? I think so from as: :radio_buttons. If you are, try:
<%= f.input :experience, as: :radio_buttons, collection: [['0', 'false'], ['1', 'true']], label_method: :second, value_method: :first %>
You can probably infer the logic from that line. Make an array of arrays for your collection, each sub array containing first the value of the radio button, and then the label.

how to append/replace alt/title attribute in all image tags?

say I have an action template like this
# home/index.html.erb
<%= img_tag "logo.gif" %>
if I want to add alt/title attribute to it, I can just do
# home/index.html.erb
<%= img_tag "logo.gif", alt: "alt!!", title: "title!!" %>
but I have 1000 image tags and I don't want to change every each one of them.
I then thought of using rack middleware and modify image tags before outputting from server.
http://railscasts.com/episodes/151-rack-middleware?view=asciicast
doc = Nokogiri.HTML(#response.body)
doc.search("img").each do |tag|
[:alt, :title].each{|attribute| tag[attribute] = "changed!!" }
end
but when I follow the railscast episode, it appends entire body on the top of the original rather than replacing it.
Am I doing it wrong in the rack, or is there a smarter way to do this?
Updated answer:
# /config/initializers/image_tag_helper.rb
module ActionView
module Helpers
module AssetTagHelper
def image_tag(source, options={})
options[:src] = path_to_image(source)
options[:alt] = "Default Alt" unless options.has_key?(:alt)
options[:title] = "Default Title" unless options.has_key?(:title)
tag(:img, options)
end
end
end
end
This overrides the image_tag helper method to set default alt and title attributes.

Rails 3 - how can I customize text-label in label helper?

This is probably a bit low question, but is there any elegant way, how to change the label-text in label helper?
= f.label :name
generate
<input id="car_name" name="car[name]" size="30" type="text">
If I would like to have the text in label, say, Your Car instead of Name, how to do that?
One way is to write the label tag directly as HTML, but this is a bit dirty way...
Just add a second string argument to f.label, like this:
label_tag 'name', 'Your name'
# => <label for="name">Your Name</label>
See here

need rails like form_for tag in Rhodes

I was wondering if I can have something like form_for tag instead of the html tag in the edit.erb page in Rhodes. Because I have a Counter model with two attribs which I want to update them seperately based on the button pressed which resides right beside the value. I was able to do it in rails using the <%= form.submit 'up_a' %> & check which button was pressed in update method, like:
def update
#counter = Counter.find(params[:id])
if params[:commit] == 'up_a'
update_attri1 # simple increment method for attrib 1
elsif params[:commit] == 'up_b'
update_attri2 # simple increment method for attrib 2
end
end
and call that method to update that value.
So I want to have more control on what attribs I want to update based
on the clicks in form. Is there anyway I can achieve this in Rhodes?
EDIT :
The general problem seems to be that you want two submit buttons in a single form, each of which should do two slightly different things.
In the case that you only have two different values and one submit button for each, the simplest solution would be simply to make two forms that both call the update def (through their action-attribute), but each with their specific value of the query-parameter (in this case "commit"). These calls would have the following form:
<form method="POST" class="myForm" action="<%=url_for :controller => :Counter, :action => :update, :query => {:commit => 'up_a'}%>">
However, if you only want a single form (possibly also with many other input-values) there are several different ways to do it. In the following you will see a detailed implementation of one way to do it.
In this solution your buttons should NOT be submit buttons, but regular buttons (exactly how they are made with jQuery Mobile).
In order to make this solution work, you will need to use some javascript. You should therefore add the following javascript functions to your application.js and include it in your layout.erb.
function submitForm(formClass){
var activeForm = 'div.ui-page-active '+formClass;
$(activeForm).submit();
}
function callCounterSetUpdateAction(c){
$.get('/app/Counter/setUpdateAction', { commit: c});
}
Now that we have the needed javascript functions in place, lets take a look at edit.erb.
In this example Counter have three different attributes: a, b and c. We will however, only pay attention to a and b to begin with.
The form in your edit.erb file should be similar the implementation below. Notice, that the form actually doesn't have a submit button (as we will see later, the submit is actually made through our javascript function submitForm(formClass)).
<form method="POST" class="myForm" action="<%= url_for :action => :update %>">
<input type="hidden" name="id" value="<%= #counter.object %>"/>
<div data-role="fieldcontain">
<label for="counter[a]" class="fieldLabel">A</label>
<input type="text" id="counter[a]" name="counter[a]" value="<%= #counter.a %>" <%= placeholder( "A" ) %> />
</div>
<div data-role="fieldcontain">
<label for="counter[b]" class="fieldLabel">B</label>
<input type="text" id="counter[b]" name="counter[b]" value="<%= #counter.b %>" <%= placeholder( "B" ) %> />
</div>
<div data-role="fieldcontain">
<label for="counter[c]" class="fieldLabel">C</label>
<input type="text" id="counter[c]" name="counter[c]" value="<%= #counter.c %>" <%= placeholder( "C" ) %> />
</div>
<a data-role="button" data-transition="none" href="javascript:callCounterSetUpdateAction('up_a');">Update A</a>
<a data-role="button" data-transition="none" href="javascript:callCounterSetUpdateAction('up_b');">Update B</a>
</form>
Now that we have defined our view (edit.erb) lets take a look at the definitions we need our controller.
Firsly, as it can be seen from the href attribute on the buttons, what actually happens once we press a button is that it calls a javascript function which in turn calls the following def in the controller:
def setUpdateAction
$pressedButton = #params['commit']
WebView.execute_js("submitForm('.myForm');")
end
The purpose of this def is to store the parameter we sent from our button and then submit the form on the active page. Notice here that we added a class called myForm to the form shown above. You should also notice that we ensure that only the form on the active page is selected by adding 'div.ui-page-active ' to our formClass in the jQuery selection.
Finally, lets take a look at how your update definition should look like:
def update
#counter = Counter.find(#params['id'])
c = #params['counter']
if #counter
if $pressedButton == 'up_a'
# Update value A.
#counter.update_attributes(
{"a" => c['a']}
)
elsif $pressedButton == 'up_b'
# Update value B.
#counter.update_attributes(
{"b" => c['b']}
)
end
end
redirect :action => :index
end
It should be noticed here that we select which attributes to update based upon the $pressedButton variable we assigned through setUpdateAction. As a final comment we could also update multiple attributes as seen below (where we also update the 'c' attribute).
#counter.update_attributes(
{"b" => c['b'],"c" => c['c']}
)

adding size option to file_field tag in rails

ANSWERED
I actually found the answer while formulating the question but I'm posting it any way since some might find this useful(as said here: https://meta.stackexchange.com/questions/49922/should-i-continue-adding-a-question-if-i-have-found-the-answer-myself)
I'm having trouble adding size to a file field in ROR3. Here was my syntax:
= f.file_field :file, :size => "11"
this doesnt appear but creates an file input field with this:
<input type="file" name="soap_test_zip_file[file]" id="soap_test_zip_file_file">
now I KNOW I made it work before so I looked into some old code and found this:
= file_field_tag :file, :size => 11
which outputs this:
<input type="file" size="11" name="file" id="file">
which gives me the correct size, but the wrong file id and name. So I tried this:
<input type="file" size="11" name="soap_test_file_file" id="soap_test_file_file">
which gives me the RIGHT ID, but the WRONG NAME. Question is how do I reproduce that file_field but with the size?
I looked into this answer by Ryan Bigg btw: Problem showing the 'size' attribute for a 'file_field' using Ruby on Rails 3
and he's saying it's a cross browser thing that they render file fields differently. That is the case, but I would like to render a short file field IF the browser can handle it.
I used:
= file_field_tag :soap_test_zip_file, {:name => 'soap_test_zip_file[file]', :size => 11}
This made me override the name(for the controller) and the size
doesn't seem to work for me..
I thought of another alternative :
jquery ..
$('#user_photo_photo').attr('size', 1);
bingo!!
If you want to not rewrite the name attribute you can do something like this :
keep your form
= f.file_field :file, :size => "11"
add an override for the file_field method
# lib/my_override.rb
module ActionView
module Helpers
module FormHelper
def file_field(object_name, method, options = {})
InstanceTag.new(object_name, method, self, options.delete(:object)).to_input_field_tag("file", options.update({:size => options[:size]}))
end
end
end
end
And load it through an initializer
# config/initializers/load_lib.rb
require 'my_override'