If I have a simple_form association (as: :checkboxes), how can I customize the text that appears inside the legend tag?
I discovered how, with some help from this answer.
<%= f.association :inventory_sublocations,
collection: location.inventory_sublocations,
label: 'my custom label', # "my custom label" will appear inside the legend tag
as: :check_boxes %>
Related
I am using I18n for internationalization. for displaying place holder content in locale language in placeholder of text_field_tag im using following code.
<%= text_field_tag('email', "", class: 'form-control', placeholder: t('shared.enter_email')%>
And config/locales/en.yml content is as follows:
en:
shared:
enter_email: Enter Email
on running application, the content in the placeholder contains only Enter and its ignoring name because there is a space in-between.
i tried different syntax, all are producing same result. Is there a way to get this done?
I was able to solve this issue by using interpolation like this.
<%= text_field_tag('email', "", class: 'form-control', placeholder: "#{t('shared.enter_email')}" %>
I am placing *image_tag* images within *link_to* elements, as well as trying to do a mouseover image swap. It's all working except for the mouseover, which is not grabbing the alternate image. On a more general note, am I doing hyperlinked images correctly? Sorry, new to Rails. Much appreciated!
<%= link_to (image_tag("#{product.prod_img}.jpg", alt: product.prod_name, class: 'img_prod_thumb', mouseover: "#{product.prod_img}_over.jpg")), "/products/#{product.id}" %>
Couple of pointers:
Don't dynamically add img extensions to your code (esp. in the view) unless there is a very good reason to do so(?)
You can use simple product as the path, instead of a hardcoded url
Here's what I'd do:
>>> move product image name construction to the model, helper, or decorator
# model (for simplicity)
def prod_img_full
"#{prod_img}.jpg"
end
def prod_img_over
"#{prod_img}_over.jpg"
end
>>> update and clean up link_to
<%= link_to image_tag(product.prod_img_full,
alt: product.prod_name,
class: 'img_prod_thumb',
mouseover: product.prod_img_over),
product %>
You could easily move the image_tag to a decorator, which would allow this within your views:
<%= link_to product.hover_image, product %>
I have an autocomplete field on my form that is working however I need to force the user to select one of the values from the list (with autocomplete, the user is not restricted to an item from the list -- it's a textfield and they can enter whatever they want). The jQuery combobox adds the additional functionality that I require. Can anyone help me add that additional functionality to my form -- is there a tutorial or exmample I can follow?
Here's what I have so far (and it is working - Thank you Ryan Bates )
view - new.html.erb
<%= f.input :widget_name, input_html: { data: { autocomplete_widget_source: widgets_list_path } } %>
controller
def list
#widgets = Widget.order(:name).where("name like ?", "%#{params[:term]}%")
render json: #widgets.map(&:name)
end
JQuery
jQuery ->
$('#model_widget_name').autocomplete
source: $('#model_widget_name').data('autocomplete-widget-source')
I tried using a simple collection_select, but the document is too large (10,000 items) because of the size of the select list.
<%= collection_select :model, :widget_id, Widget.all, :id, :name, selected: #model.widget_id -->
Thanks in advance.
I think I finally found the answers I was looking for.
I added the following
jQuery ->
$('#model_widget_name').bind 'autocompletechange', (event, ui) ->
if (!ui.item)
$(this).val('');
Does this make sense? Do I need more?
THANK YOU TO THE FOLLOWING:
mechianicalfish on stackoverflow
Mark Berry at MCB
Systems
I'm using Carrierwave to add and upload an image to Amazon S3. this works ok, and once the form is saved I display the image and an x box to remove it.
I would like to use ajax to handle the click event on the 'x' image' on click I would like to remove the image and clear the field on the form so that the input field is once again displayed
The image field is an attribute of the model class i am editing in the form.
Person < ActiveRecord
attr_accessible: image
the partial for this part of my form shows the image if it exists, otherwise the input file_field if it does not exists
<div class="field">
<%= image_tag #pass.background_image_url(:thumb) if #pass.background_image? %>
<%= f.file_field :background_image if #pass.background_image.to_s == '' %>
<%= content_tag :div, '', class: "delete_image_fields" if #pass.background_image? %>
</div>
I have some jquery which i can sccessful hide the image field.
jQuery ->
$('.field .delete_image_fields').click ->
$(this).parent().find('img').hide()
event.preventDefault()
The image field gets hidden no problem
What i would like to happen is
a) clear the input field from the pass object
b) submit the change (remotely)
c) delete the remote image on S3
e) re-display the file_input field for the image so it can re-selected if required
Any help or pointers would be appreciated
UPDATE
I've got this partially working to display corect fields and adjust the input link. but i'm not sure how to actually delete the file from the models attribute
I've updated the partial to the following which dispalsy either the image ro the create file button
<div class="field">
<%= f.label :background_image %><br />
<% if #pass.background_image?%>
<%= image_tag #pass.background_image_url(:thumb) %>
<%= f.file_field :background_image , style: "display:none"%>
<%= content_tag :div, '', class: "delete_image_fields" %>
<% else %>
<%= f.file_field :background_image%>
<% end %>
and updated my jquery to this
$('.field .delete_image_fields').click ->
$(this).parent().find('img').hide()
$(this).hide()
$(this).parent().find('input').val('')
$(this).parent().find('input').show()
event.preventDefault()
To delete the file, you could take advantage of the remove_mounted_field_url carrierwave creates.
From here I see two solutions, either create a new action in your controller that will only remove the file, either use the update action. I like to use as much as possible the original actions(index/new/create ...), so I will use the second solution.
You need to do an AJAX PUT request when clicking on the X box. Here what it could look like :
$('.field .delete_image_fields').click ->
$(this).parent().find('img').hide()
$(this).hide()
$(this).parent().find('input').val('')
$(this).parent().find('input').show()
event.preventDefault()
$.ajax
url: $(this).getParents('form').first().attr('action')
method: 'PUT'
data:
person:
remove_image: 1 # This will trigger the carrier wave function that remove the uploaded file
.done (data) ->
# You can do plenty if things here, for instance notify the user it's been correctly deleted
Note that this will only work on an edition form, as the url of the AJAX query which has to target the update action is taken from the form. I don't think this is a problem, as on the create form no photos is already uploaded, so there's nothing to delete.
Last thing, you could use the siblings method to find both inputs and the image
I am trying to create a link to an image #user.image_url. This will be the full sized image. I want the medium resized image to be shown #user.image_url(:medium). But what I also want is for the #user.image_url to open in FancyBox.
My current code at the moment is:
<%= link_to image_tag #user.image_url(:medium), :style => "width:717px;height:409px" %>
This links to the Users profile page, which is what I don't want.
Please help :)
Use brackets for nesting methods
<%= link_to image_tag( #user.image_url(:medium), :style => "width:717px;height:409px"), #user.image_url %>