In my Rails 3.2 project, I have a form to create a new post in new.html.erb in app/views/posts/
<%= form_for(#post) do |post_form| %>
...
<div class="field">
<%= post_form.label :title %><br />
<%= post_form.text_field :title %>
</div>
...
<div class="actions">
<%= post_form.submit %>
</div>
<% end %>
I want to display the title label as TITLE, so I changed the code to post_form.label :TITLE %>, but it still displays Title. How can I display it as TITLE?
Since this is a matter of presentation on screen as opposed to content, rather than do the transformation in eruby code, this really ought to be done in CSS:
.field label {
text-transform: uppercase;
}
If you only want to modify the :title input's label rather than all labels having the same class, add a different class or use the input's id in the CSS rule.
If you insist on up-casing it in Rails, use the second parameter to .label:
<%= post_form.label :title, :title.to_s.upcase %>
You can modify the form label as follows:
<%= post_form.label(:title, "TITLE") %>
Source: http://guides.rubyonrails.org/form_helpers.html
Related
I have a model to be fill with a form, consisting of a title and a body of text. Optionally, I want the ability to submit a link as well as a part of this model. If this is filled out, it is submitted, otherwise ignored. The form would have title and body fields at top of page, for instance.
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
Now, I want to add the field for the link, but in a different location on the page (so as to indicate that it is optional).
<%= f.text_field :link %>
I tried doing this all in one partial,
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
<! insert other content here >
<%= f.text_field :link %>
</div>
<%= f.submit "Post" %>
<% end %>
But this would lead to very messy nesting of partials and I'm not sure how to get this to work correctly. Alternatively, I was wondering if it was possible to have one form_for at the top of the page, and another form_for at the bottom of the page that are somehow "synced", so that by pressing the submit button at the top, the value entered in the bottom form_for is collected and submitted as well.
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
<%= form_for(#micropost, remote: true) do |f| %>
<! somehow sync this with the other form >
<%= f.text_field :link %>
<% end %>
One option is to have an auxiliary text field for link attribute. Copy it's value to hidden variable mapping the link attribute
Assuming you are going to use jQuery,
<%= form_for(#micropost, remote: true) do |f| %>
<%= f.hidden_field :link %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
Somwhere on the same page
<%= text_field_tag 'micropost[link]', '', id: 'aux_link' %>
<script>
$(function(){
$('form').on('submit', function(){
$('#micropost_link').val($('aux_link'));
});
});
<script>
This is just an approach. Adjust code as per your form element ids.
One issue with this approach is it will be difficult to validate if link attribute is compulsory.
Just make the form_for be the root of the view
You can just use the form_for like a container div.
Then put the <input> and <button> as you want like making your normal webpage.
Then, because you want to make some inputs optional, you can do that in rails controller.
def create_or_update
params[:micropost].delete(:link) if params[:micropost][:link].blank?
# continue the task
end
This trick is useful for all optional fields like password
I found here that the canonical way to do this is to use the "form" attribute. Give the form an id, from which the field can refer back to the form, even if the field is placed outside of the form. For instance,
<%= form_for(#micropost, remote: true, html: { id: "micropost_form" }) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
We can then use fields_for to place the desired field elsewhere, linking back to the original form.
<%= fields_for #micropost do |f| %>
<%= f.text_field :link, form:"micropost_form" %>
<% end %>
I'm attempting to integrate the "Dante" WYSIWYG text editor into my Rails project. I have it installed and displaying on the screen. See screenshot: https://i.imgur.com/lLnEc7n.png
However, in my Rails app I have users that have_many stories. I'd like to use this editor to allow users to create these stories. I need to wire the editor and the form together basically, but I have no idea how to go about doing that, as I've never done something like this before. Would anyone mind giving me some tips please?
Documentation for editor is here: https://github.com/michelson/Dante
Current page:
<%= simple_form_for #story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>
<hr>
<div id="editor">
<h1 id="dante-editor">Click Me Once. Your Title Goes Here.</h1>
<h2>Tell us about your favorite backpacking adventure. This might also be a great place to add a picture.</h2>
<p>Simply replace and highlight any text here to add text. Press "Enter" to add more text or add images. Click on the image to add a caption. It's easy once you get the hang of it, just play around with it for a minute.</p>
</div>
<hr>
<script type="text/javascript">
editor = new Dante.Editor(
{
el: "#editor",
upload_url: "/images.json", //it expect an url string in response like /your/server/image.jpg or http://app.com/images/image.jpg
store_url: "/save" //post to save
}
);
editor.start()
</script>
<%= simple_form_for #story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>
Put the div inside of your form and make it hidden field
into like this
<%= simple_form_for #story do |f| %>
<%= f.hidden_field :title %>
<%= f.hidden_field :subtitle %>
<%= f.hidden_field :content, html: { id: "content"} %> // Use 'id' in your content field and match it in your editor div. Use data field data-field-id="content"
<div id="#editor" data-field-id="content">
<%= #story.cotent.try (:html_safe) %>
// #story is your instance variable and .content is db column from story
</div>
<%= f.button :submit %>
then use jquery to bind the editor content in content field which is
$(document).ready(function(){
$("#editor").bind("input properchange", function(){
$("#story_" + $(this).attr("data-field-id")).val($(this).html())
});
});
NOTE: It only save the text content not the image
My problem is I wanted to insert a <span> tag in form_for label custom text. In normal html code, it would be like this:
<label>Address<span class="required">*</span></label>
but it Rails, how would I insert it in here:
<%= f.label :address, "Address" %>
It's just an indication for required fields.
As most of the Form helpers, you can pass a do/block instead of the name argument:
<%= f.label :address do %>
Address<span class="required">*</span>
<% end %>
Works with link_to also:
<%= link_to root_path do %>
<div>Hey!</div>
<% end %>
You can just do like this
<%= f.label :address, "Address<span class='required'>*</span>".html_safe %>
This produces the following HTML
<label for="address">Address<span class="required">*</span></label>
OR
You can do like this too.
<%= f.label :address do %>
Address<span class="required">*</span>
<% end %>
I have a simple Rails form that uses a conditional build_association (if there's not already an associated parent) to include a text_field to edit a parent. This is useful if a new record for the parent should be added. The problem with this is that if a parent already exists, if the text_field is updated then it will be changed for the parent record affecting many children. If build_association is called regardless of whether a parent association already exists, then new, duplicate parents will constantly be created.
I am trying to understand how I can use build_association and fields_for to add a new parent to the database if the user types in an unfamiliar name, but to set the parent to be an existing record if the name matches an existing parent's name. (If I can get this part to work right, the next step will be to add autocomplete.) The code is below:
<%= form_for #sermon, :html => { :multipart => true } do |f| %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :date %><br />
<%= f.text_field :date %>
</div>
<div>
<% #sermon.build_speaker unless #sermon.speaker %>
<%= f.fields_for :speaker do |g| %>
<%= g.label :name, "Speaker name:" %><br />
<%= g.text_field :name %>
<%= g.submit %>
<% end %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I think my gem get_or_build will be useful for you. I had the same problem and didn't find any appropriate clean solution so I've decided to write this gem. Enjoy!
I am new to Rails so this is probably an easy question but can't find anything that seems to explain it well.
How do I style forms in rails to. When I try to use the default styling for input (for example) it styles my text field and create button the same. Is there a built in convention or do I have to add some sort of helper. If it is a helper can you you walk me through that as I have not done it before.
Here is my form:
<% form_for (Post.new) do |f| %>
<%= f.error_messages %>
<p>
<%= f.label :title %><br />
<%= f.text_field :title %>
</p>
<p>
<%= f.label :BattleCry %>
<br/><i>Between 25 and 300 words</i><br/>
<%= f.text_area :body %>
</p>
<p>
<%= f.submit 'Create' %>
</p>
<% end %><hr/>
The most appropriate way would likely be just giving them different classes and styling them via usual css methods.
Eg.
<%= text_field( :title, :class => "something" ) %>
I think this is more of a CSS question. You seem to be on the right track ruby-on-rails-wise. Both text field and button are of type input in html, that's why your CSS style applied to both.