How can I make the new_value_path actually be a submit button that creates a new value instead of just refreshing back onto itself?
My current new.html.erb:
<h1>New Value</h1>
<%= render 'form' %>
<%= link_to new_value_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
I want to keep the class: 'btn' and the span class="glyphicon glyphicon-plus" I think it has something to do with CRUD, but I haven't found an answer that specifically deals with including a class and a span.
I had to solve the answer in the _form itself using f.submit
Related
I have this form:
= form_tag(path, name: "name") do |f|
= hidden_field_tag "abc", content
= submit_tag "" do
%i.icon.ion-android-sync
As you can see, I am trying to put an Ionicon inside the Form Submit tag.
I've tried a bunch of ways, none of which worked.
With the given example I get an empty button with an approximate width of 3px.
Is it possible to embed a child in a submit_tag? If, how would you go about doing so?
Thanks a lot for each answer!
The short answer is "no". However, you can make a button with type of "submit" that'll do the same thing and allow you to put content in it:
%button{type: "submit"}
%i.icon.ion-android-sync
No the Rails submit helper won't let you do that.
I use a custom submit helper in my app :
# Render a form submit button
# === Params
# +value+:: Value of the input/commit button, used for route constraints
# +text+:: Text for the button
# +:html_options+::
def submit(value=nil, text=nil, html_options={})
text ||= 'Submit'
html_options[:name] ||= 'commit'
html_options[:type] = 'submit'
html_options[:data] ||= {}
html_options[:data][:disable_with] ||= 'Please wait'
html_options[:autocomplete] = "off" # https://github.com/rails/jquery-ujs/issues/357
content_tag(:div, class: 'form-submit-wrapper') do
button_tag(html_options){ block_given? ? yield : text }
end
end
You can just pass whatever HTML you want in a block (sorry this is ERB, I'm not really familiar with HAML)
<%= submit do %>
<i class="icon ion-android-sync"></i>
<% end %>
The first two params are only helpful if you have several submit buttons for your form
<%= submit('preview_action', 'Preview result') do %>
<i class="icon ion-android-sync"></i>
<% end %>
<%= submit('really_do_action', 'Do it for real') do %>
<i class="icon ion-android-sync"></i>
<% end %>
The link_to method is as which is not disabled:-
<%= link_to edit_cabinet_path(object), remote: true, disabled: true do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
but if i do like below which hides the link
<%= link_to edit_cabinet_path(object), remote: true, style: "display:none;" do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
Now the question is how to disable this type of link with block, and whats the reason that second code is working and first is not.
Probably, you are looking for link_to_if. link_to_if makes your link clickable only if your condition pass.
Your code should be something like:
<%= link_to_if false, edit_cabinet_path(object), remote: true do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
To make it dynamic you can call condition that satisfy whether to active or inactive that link, something like:
<%= link_to_if cabinate.active?,
"<span class='glyphicon glyphicon-pencil'></span>".html_safe,
edit_cabinet_path(object), remote: true %>
Hope this answer your question..
Actually there is no disabled attribute available for link_to, only for button_to tag.
For more information please refer here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
In this case, you might want to use link_to_if, please have a look into this: http://apidock.com/rails/v4.2.1/ActionView/Helpers/UrlHelper/link_to_if
I wrote some simple JS to allow you to add disabled: true to link_to method
//this allows us to use html disabled attribute in rails
//to prevent clicking on a disabled link from doing anything
$('a[disabled]').click(function(e){
e.stopImmediatePropagation()
e.preventDefault();
});
link_to_if doesn't work as expected. It only renders the given block when your condition is false as a fallback.
https://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to_if#1589-Passing-a-block-does-not-behave-as-expected
In my case I made a Proc for a given block
<%link_block = Proc.new{%>
<span class="glyphicon glyphicon-pencil"></span>
<%}%>
<%if condition?%>
<%= link_to edit_cabinet_path(object), remote: true, disabled: true, &link_block%>
<%else%>
<%link_block.call%>
<%end%>
I'm trying to style a simple Ruby on rails form with the Twitter Bootstrap css but I'm struggling to workout which bits of rails code goes into which part of the Bootstrap css for a form.
For example where would the following line fit into the Bootstrap css for a form? :
<%= f.text_field :company %>
Based on the examples in the Twitter Bootstrap documentation, I am assuming you are attempting to apply the form-control class to your input. If this is the case, you would do it like this.
<%= f.text_field :company, :class => "form-control" %>
See similar question: Using CSS to style Ruby objects in erb
<%= f.text_field :company %>
Actually, this code means "Create a markup input of type text, with the good name (ex: user[company]) so Rails can handle the parameter easily". No more no less.
Example Output:
<input type="text" name="user[company]">
Bootstrap will envelope then this object with a style provided by CSS. So
1- Ensure your css is loaded into your "application.css"
Usually, you'll need to add style for the form
<%= form_for #resource, html: { class: "form form-inlined" } do |f| %>
And also around your input text field:
<div class="form-group">
<%= f.label :company %>
<%= f.text_field :company, class: "form-input" %>
</div>
This is just an example, but you can see where to put the bootstrap class on each elements.
I have a navbar, which is showing an unread messages count. The unread count has to go within the navbar text for formatting, so I have used the below:
<li><%= link_to "My Messages #{current_user.mailbox.receipts.where({:is_read => false}).count(:id, :distinct => true).to_s}", conversations_path, class: 'small button' %></li>
How do I add a class to the count? I want to add the bootstrap navbar-unread class.
I can put:
<span class='navbar-nav'><%= current_user.mailbox.receipts.where(:is_read => false).count(:id, :distinct => true).to_s %></span>
...outside the list but then the unread count is not in the right place.
Thanks for any help, can't find an answer anywhere, or at least a better way to do this.
EDITED:
The output I need from the html would look like this:
<li>
<a class="small button" href="/converssations/link">
My Messages<span class="navbar-unread">0</span>
</a>
</li>
So I need to pass a class into a span around the ruby that starts 'current_user.mailbox...etc
It's to show the number of unread messages, which is a small number in the corner of the button.
Maybe this can help you.
Look at ActionView Helpers reference also.
<%= link_to content_tag(:span, "My Messages #{current_user.mailbox.receipts.where({:is_read => false}).count(:id, :distinct => true).to_s}", class: "navbar-nav"), conversations_path, class: "small button" %>
will have output like this
<a class="small button" href="/converssations/link">
<span class="navbar-nav">My Messages Count</span>
</a>
To achieve your mentioned behavior you can pass a block to link_to like this
<%= link_to "#your_link", class: "small button" do %>
My Message <%= content_tag(:span, "1", class: "navbar-unread") %>
<% end %>
I have been trying without much luck to get <%= f.submit %> to appear as the same as my other "buttons", all in a row. I have found this helpful post on modifying the class of f.submit, but realized upon examining its element in browser that it took on the class of input, regardless of which additional classes I added as option parameters, thus restricting its appearance.
Essentially, each of my other buttons has the following form:
<div class="sort-nav">
<ul>
<li><h4><%= link_to "Some stuff", some_link_path %></h4></li>
</ul>
</div>
And I was wondering if there is a way to fit all of these styles compacted into one class, and override that of the input class contained in f.submit. Thanks.
For edification, this button is going to be my "Follow"/Unfollow" button used to create or destroy Relationships, which I first intend to render a _follow_form partial with the following code:
<% if current_user.following?(#course) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
With each of the individual _followpartial looking like the following:
<%= form_for(current_user.relationships.build(followed_id: #course.id)) do |f| %>
<%= f.hidden_field :followed_id %>
<%= f.submit "Follow course" %>
<% end %>
a bit hackish but you can always use js to submit the form so instead of using f.submit, change it to
<div class="sort-nav">
<ul>
<li>
<h4><%= link_to_function "Some stuff", '$(this).closest("form").submit()' %></h4
</li>
</ul>
</div>