Rails: using link_to to make a link without href

Question

How can I use the link_to helper to make a link without an href attribute? I want to make a link exclusively for a javascript action, I don't want it reloading the page or anything.

When I omit the url parameter, clicking the link reloads the page. Ditto for providing nil in place of the url.

Doing "#" makes it reload the page. I know I can override the link action with JS, but seems there should be an even simpler solution with `link_to` — bevanb, Aug 22 '12 at 20:50
what HTML is it generating for you? At the end of the day, your JS should prevent the default link clicking behavior anyways. This may be a non-issue. — David Nguyen, Aug 22 '12 at 20:58
You might also consider just using a button instead of for semantic reasons. — David Nguyen, Aug 22 '12 at 21:00

niels · Answer 1 · 2021-01-28T14:57:49.533

50

You can also use a

content_tag("a","link text")

which gives you

<a>link text</a>

or, from the comment from @cesartalves, with a block:

content_tag("a") do
  image_tag("src") 
end

See: rails api

edited Jan 28 '21 at 14:57

answered Aug 23 '12 at 06:41

niels

1,719
10
20

2

Clever, however, it appears that links without an href attribute don't cause the cursor to change to a pointer (it stays as a text cursor). – Matthew Clark Mar 08 '13 at 16:33
Seems like modern versions of Rails use cursor pointer now. :) – Aaron Gray Feb 13 '18 at 21:14
By the way, you can also use this with a block: `content_tag("a") do image_tag("src") end` – cesartalves Jan 27 '21 at 15:18

score 41 · Accepted Answer · answered Aug 22 '12 at 21:49

41

I use this approach:

= link_to('Click me', 'javascript:;', :id => :foo)

Its basically a Javascript no-op

answered Aug 22 '12 at 21:49

Cody Caughlan

32,456
5
63
68

2

This works. Ended up just making an `a`-tag without an href- that way browsers won't show the `javascript:;` link destination preview in the lower-left. – bevanb Aug 22 '12 at 21:59
3

What's the difference from `javascript:void(0)`? – freemanoid Sep 23 '14 at 15:31

score 13 · Answer 3 · answered Aug 22 '12 at 21:46

13

Set the href to:

javascript:void(0)

This will let you have a link that clicking it does nothing, doesn't reload the page, and doesn't move the page up to the top.

answered Aug 22 '12 at 21:46

Solomon

6,145
3
25
34

score 3 · Answer 4 · edited Feb 11 '18 at 18:46

<%= link_to '+ Add Make', 'javascript:void(0)', id: 'add-make', onclick: 'addMake()' %>

and then your jQuery:

function addMake() {
  $.ajax({
    url: '/dealers',
    type: 'GET',
    dataType: 'script',
    success: function (data) {
      console.log('it was successful')
      $('.add-make').hide();
    },
    error: function (data) {
      console.log('it was error')
    }
  });
}

score 2 · Answer 5 · answered Sep 10 '13 at 18:45

2

An alternative is

= link_to("My hyperlink", "#")

This will give you a link that when clicked, does not reload the page like passing in nil. At the same time, it will set the mouse to pointer on mouseover, which you will not get with the content_tag approach.

answered Sep 10 '13 at 18:45

Aaron Gray

11,283
7
55
61

1

This is okay in some places, but it will bounce the screen to the top of your page. Adding the 'javascript:;' as suggested above probably the better way to go in most cases. – jacklin Aug 14 '14 at 02:36

score 2 · Answer 6 · answered Jul 26 '17 at 06:04

2

I think you're better off using a button in situations where there is no href.

<button class='button'>Hello</button>

answered Jul 26 '17 at 06:04

stephenmurdoch

34,024
29
114
189

score 1 · Answer 7 · edited May 23 '17 at 11:46

1

An example for rails 5 would be:

<%= content_tag("a", image_tag("/logo.png"), class: "navbar-brand") %>

This would render as:

<a class="navbar-brand"><img src="/logo.png" alt="Logo"></a>

This is similar to niels' answer but with a nested image_tag and a class.

Source: Rails API

edited May 23 '17 at 11:46

Community

1
1

answered Nov 24 '16 at 01:09

tordoch

11
3

Artur INTECH · Answer 8 · 2017-01-19T16:37:00.340

0

I prefer using plain HTML without href attribute at all in such cases:

<a data-toggle="modal" data-target="#myModal">Open dialog</a>

IMHO it is more readable than content_tag("a","link text").

The disadvantage of href=# is that the browser will scroll to the top when clicked by default
javascript:; looks ugly

edited Jan 19 '17 at 16:37

answered Jan 19 '17 at 16:31

Artur INTECH

6,024
2
37
34

Rails: using link_to to make a link without href

8 Answers8

Linked