link_to block not working - ruby-on-rails

I'm using a series of link_to blocks to create buttons in my application. However I'm finding that these links don't end up working. As I mouse-over the button, it recognizes the link, the correct url displays in the lower left-hand corner in firefox, but when I click, nothing happens. Nothing comes up in my terminal or development log either.
My code is as follows:
<%= link_to new_folder_path do%>
<div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
<% end %>
This renders the following html:
<li>
<a href="/folders/new">
<div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
</a>
</li>
I should also note that if I just type the standard link in without the do block, it runs just fine:
<li><%= link_to "test", new_folder_path %></li>
Any thoughts on this would be much appreciated!


Try this.
= link_to "<span class='glyphicon glyphicon-plus'></span>Add Folder".html_safe, new_folder_path, class: 'btn btn-default add-button add_fields'


You're probably better using button_to for the buttons -
Generates a form containing a single button that submits to the URL created by the set of options.
So instead of your link_to, you'd be able to use:
<%= button_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>
As a sidenote, if you're trying to style elements inside an <a> tag, you're going to have problems. You'll be much better styling the <a> tag itself, or not at all.
As such, the issue you're getting could probably be resolved using the following:
<%= link_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>
--
Icons
I know Bootstrap includes Glyphicons. If they're anything like ionIcons, they'll work by prepending the glyph with a :before pseudo class.
If this is the case, you don't need a separate <span> element to encapsulate them; just add the class to your link/button and the :before should be prepended.
Of course, if you want to style the span inside the link, you'll have to use the link_to block; however you need ensure you encase your text in the span instead of having it with no content.


Turned out I had dropped a class into my div that prevented the link from rendering (add_fields was the class). Profoundly unsatisfying answer it is what it is. Thanks to anyone who took the time to give me a hint.

Related

Why does my link break (stop navigating to its location) when I use data-toggle attribute?

I am having a play around with Bootstrap 4 in Rails 5 and I am trying to get a data-toggle to work on nav-pills.
With my code below, the pill toggle works and it breaks the link_to part of the code and the link doesn't work.
<div class="card">
<div class="card-block">
<ul class="nav nav-pills nav-justified" role="tablist">
<%= link_to 'All Things', all_things_path, class: 'nav-link nav-item active' %>
<%= link_to 'Some Things', some_things_path(#things[0]), class: 'nav-link nav-item', "data-toggle" => "pill" %>
</ul>
</div>
</div>
If I remove the "data-toggle" => "pill" the link works fine and routes to the collection as required.
I have also tried using data: { toggle: "pills" } but this also breaks the link.
Anyone got any ideas?

If by "breaking the link", you mean that browser no longer navigates to a new page, then it's because bootstrap's javascript intercepts the click on the link to do the toggling.
Clicking on a link takes you to its location, a new page. Clicking a toggle element shows/hides some other element on the current page. You can't have both.

Rails 4 - Font Awesome Icons in Links

Im trying to figure out how to make a link in my show page.
I want a link to
<%= #project.external_link %>.
I want to display it as:
<%= link_to '<i class="fa fa-link"></i>' %>
I've tried at least 20 variations on combining these two and I can't find a way that works.
Does anyone know how to display a font awesome icon, with a link to a dynamic field?

Try this:
<%= link_to #project.external_link do %>
<i class="fa fa-link"></i>
<% end %>

Try using :
<i class="fa fa-link"></i>

How do I convert this a href into a Rails friendly link_to

I would like to convert this:
<a class="btn btn-google-plus" href="https://plus.google.com/share?url=SHAREMESSAGE" title="Share on Google+" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
Into a Rails friendly link_to that not uses post.title in the URL and also includes a link to the current post.
In other words, I started by doing this in HTML like this:
<a class="btn btn-google-plus" href='https://plus.google.com/share?url=<%= "#{post.title} - Read more at #{post}" %>' title="Share on Google+" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
The issue with this is that this generates a URL like this (the Twitter equivalent, but the principle is the same):
http://twitter.com/home?status=PNPYO%20saddened%20at%20passing%20of%20Roger%20Clarke%20-%20Read%20more%20at%20#<Post:0x00000101660e98>
Where it returns a Post object. The issue I ran into quickly, was that I wasn't quite sure how to generate a link_to within a link_to. Is that even possible?
This is how I want the final status on Twitter to look:
PNPYO saddened at passing of Roger Clarke - Read More at http://example.com/pnpyo-saddened-at-passing-of-roger-clarke
How do I achieve this in the most Rails-friendly way possible? I am not averse to just using regular a href tags, if it can't be done with a link_to helper. But either way, I still need to be able to generate a link_to within the status message.

You can achieve as follow :
<%= link_to "https://plus.google.com/share?url=#{post.title} - Read more at #{post}", :class => "btn btn-google-plus" :title => "Share on Google+" :target => "_blank" do %>
<i class="fa fa-google-plus"></i>
<% end %>

You don't want to call a link_to within a link_to, but you want to call an url_helper directly.
link_to in rails is a helper method which generates the necessary html code for links. Whether you want to use this convenience function or not, what you are searching for is a direct method to generate an url that you can concatenate into a string.
Simply use the following as the href for your anchor:
http://twitter.com/home?status=<%=u "#{post.title} - Read more at #{post_url(post)}" %>
(<%=u %> performs the url encoding of the string)

BS3 glyphicon padding

I have a navbar in a rails app using glyphicons. I can't seem to set the spacing between the glyph and the link label unless I put a " " in front of the label.
Can anyone suggest a better solution. Thanks!
<li>
<%= link_to "Maintenance", dashboards_path, :class=> "glyphicon glyphicon-wrench" %>
</li>

If you have tag and content in a single line it produces no padding.
Make sure you anchor looks something like:
<li>
<a href="#" class="glyphicon glyphicon-wrench">
Maintenance
</a>
</li>
Or using link_to
<li>
<%= link_to dashboards_path, class: 'glyphicon glyphicon-wrench' do %>
<span>Maintenance</span>
<% end %>
</li>
Though it seems strange but
Maintenance
produces no spaces between icon and text
bootply

How to add glyphicons to rails link_to helper - Bootstrap 3

I've been looking everywhere for a good explanation of how to add glyphicons to rails link_to and button_to helpers, but I've found very little. What I've gathered so far has led me to this:
<li>
<%= link_to deals_path, class: "btn btn-default" do %>
<%= content_tag(:i, "Dasboard",:class=>' glyphicon, glyphicon-th-large') -%>
<% end %>
</li>
This doesn't work though and I think the one example I found was from Bootstrap 2. Can anyone point me to a good resource on this, or provide a quick example? Thanks in advance!

I found the answer to this here
The basic form of a glyph link in rails looks like this:
<%= link_to deals_path, class: "btn btn-default" do %>
<i class="glyphicon glyphicon-euro"></i> Dashboard
<% end %>
Modify as needed. The second example in that link didn't work for me, I assume because I'm using the rails_bootstrap_sass gem? Regardless, the above form worked for me.

If you're looking for an inline method, This works for me:
<%= link_to '<i class="glyphicon glyphicon-th-large"></i> Dasboard'.html_safe, deals_path, class: 'btn btn-default' %>
The <i></i> can go either side of the 'Dashboard' I've only tested this particular example out in Rails 4 with Bootstrap 3 but this was the method I used prior in Rails 3 and Bootstrap 2
Hope this helps somebody in the future
Edit: Removed comma to render the glyphicon correctly.

In my experience the answer by #settheline is almost ideal, but on my website it changes the font relative to other buttons without icons. So I ended up doing something like this:
<%= link_to deals_path, class: "btn btn-default" do %>
<span class="glyphicon glyphicon-euro"></span> Dashboard
<% end %>
And this seems to keep the font equal to other iconless buttons.

Using slim, here's link_to:
= link_to deals_path
span.glyphicon.glyphicon-th-large
and button_to:
= button_to deals_path, class: "btn btn-primary"
span.glyphicon.glyphicon-th-large
It's possible to add more text/etc. to the button as well, just don't nest it under the glyphicon's span.

Using HAML:
= link_to deals_path, class: "btn btn-default" do
= "Dashboard"
%span.glyphicon.glyphicon-th-large

You can use the font-awesome-rails gem for this purpose, and then do:
<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>

&For those who'd avoid unnecessary repetition of the long-winded thing..
i shove something like this in my app/helpers/application_helper.rb:
module ApplicationHelper
def glyph(icon_name_postfix, hash={})
content_tag :span, nil, hash.merge(class: "glyphicon glyphicon-#{icon_name_postfix.to_s.gsub('_','-')}")
end
end
Example .erb usage:
<%= button_tag glyph("heart-empty", aria_hidden: "true", foo: "bar"), type: "button", class: "btn btn-default" %>
<%= link_to glyph(:eye_open) + " Oook", some_path, class: "nav" %>
I am using this in Rails4 but i think it might also work in Rails3
Ooook! i also happened to notice this advise from the bootstrap (Currently v3.3.5) docos:
Don't mix with other components Icon classes cannot be directly combined with other components. They should not be used along with
other classes on the same element. Instead, add a nested <span> and
apply the icon classes to the <span>.
Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements.

There is faster and easier way to apply (fontawasome) icons without additional gem installations.
You may follow this pattern:
<%= link_to root_path, class: "nav-link" do %>
<i class="fas fa-pencil-alt"></i>
<% end %>
Of course, you must first create a kit FREE account from the FONTAWASOME and it must be set in your application.html.erb's head to use the icons.
Follow the instructions given here to create an account in Fontawasome (if you don't have one yet).
If you need an example, you can check out my repo in GitHub

Resources