CODEWITHSUNDEEP
ruby-on-railsrubyhyperlinkanchorpage-jump
Damian
Damian

Reputation: 663

How to create an anchor and redirect to this specific anchor in Ruby on Rails

I'm trying to create unique anchors for every comment on my blog so a person can take the url of an anchor and paste it in their browser, which will automatically load the page and scroll down to the point in the page where their comment starts.

Perhaps I'm going about this the wrong way but I've tried this which was to no avail.

Comment view - Fail 1 - when pasted in a browser this link does not scroll down to the desired position

<%= link_to '#', :controller => 'posts', :action => 'show', :id => comment.post, :anchor => 'comment_' << comment.id.to_s %>

Comments controller - Fail 2 - Correct url in browser but no scrolling happens it just stays at the top of the page

redirect_to :controller => 'posts', :action => 'show', :id => @post, :anchor => 'comment_' + @comment.id.to_s

If someone could help I'd be very grateful :)

UPDATE: The solutions below almost work, however I come out with the following URL which isn't being scrolled to if I click on it.

# i.e. http://localhost:3000/posts/please-work

Upvotes: 38

Views: 31176

Answers (6)

nilid
nilid

Reputation: 372

this is best way:

<%= link_to '#', post_path(comment.post, anchor: dom_id(comment.id)) %>

Upvotes: 0

Mohamad
Mohamad

Reputation: 35339

Here's an improvement on @XGamerX's answer.

<%= link_to '#', [comment.post, { anchor: dom_id(comment) }] %>

Or

<%= link_to '#', post_path(comment.post, anchor: dom_id(comment)) %>

Upvotes: 1

XGamerX
XGamerX

Reputation: 851

Actually, anchor is an option for the path, not for the link_to

<%= link_to '#', post_path(comment.post, :anchor => "comment_#{comment.id}") %>

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#M001565

link_to "Comment wall", profile_path(@profile, :anchor => "wall")
       # => <a href="/profiles/1#wall">Comment wall</a>

Upvotes: 82

vrish88
vrish88

Reputation: 21397

It looks like you want to use the link_to code that you have in your question. Then in your list of comments you have to make sure that you have an anchor tag named the same thing in the link.

So this:

 <%= link_to 'Your comment', post_path(@comment.post) + "#comment_#{@comment.id.to_s}" %>

will generate something like this

 <a href="localhost:3000/posts/2#1comment_234">Your comment</a>

 /* html code */     

 <a name="comment_1234">This is a comment</a>

You have to manually tack on the #comment_ otherwise the link_to method thinks that the :anchor attribute that you are passing it is for that tag.

Upvotes: 5

klew
klew

Reputation: 14967

These links will scroll down to position where you have code like:

<a name="comment_1"></a>

I don't know if there are helpers that will do it for you, but it is very simple and you can write your own.

Upvotes: -1

John Topley
John Topley

Reputation: 115292

Try this:

<%= link_to '#', post_path(comment.post), :anchor => "comment_#{comment.id}" %>

Upvotes: 0

Related Questions