Trouble using 'link_to' and jQuery

Question

I am using Ruby on Rails 3.0.7 and jQuery 1.6.1 and I am binding an AJAX click event to a link_to HTML output as in the following example:

link_to 'Link name', '#', :id => 'link_css_id'

As you can see I set the URL to '#'. Doing that when I click on the link the current view will be moved at the top of the page, as well. Since I don't like this behaviour, I set nothing (that is, nil or '') for the URL parameter, but on clicking on the link I get an alert message "error" that immediately after disappear. Then in the Firebug Console I get:

uncaught exception: [Exception... "prompt aborted by user" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: resource://gre/components/nsPrompter.js :: openTabPrompt :: line 468" data: no]

How can I solve this issue and avoid the behavior of going at the top of the page on clicking the link?

The AJAX request is:

$jQ('#link_css_id').bind('click', function() {
  $jQ.ajax({
    type:    "POST",
    url:     "<%= user_url(@current_user)%>/test_method",
    data:    "test_data=test",

    error:   function(jqXHR, textStatus, errorThrown) {
      alert(textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
      $jQ('#css_id').html('error')
    },
    success: function(data, textStatus, jqXHR) {
      $jQ('#css_id').html('success')
    }
  });
});

Can you paste in your ajax js as the problem is in there i think — Question Mark, Jun 23 '11 at 11:14
@Question Mark - I updated the question with the AJAX request code. — user502052, Jun 23 '11 at 11:19

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

The url "#" means an internal anchor is being set. With no name attached to it, it simply focuses on the whole page, and scrolls back up to the top. As for using the link_to method, the url attribute is required and cannot be omitted.

With jquery, you can use preventDefault. This will prevent the default action from the event (e.g.., clicking on a link will open the href url). This is quite useful. You might want to link to an existing page for users that do not have javascript enabled (and where the ajax call won't work), while it is being ignored by those who do have javascript.

preventDefault documentation by jQuery.

Good advice making the href point to a non-Javascript fallback. — Nick, Jun 24 '11 at 12:26

score 2 · Answer 2 · answered Jun 23 '11 at 11:20

2

you can set javascript:void(0) instead of # it help me.

answered Jun 23 '11 at 11:20

bor1s

4,081
18
25

score 1 · Answer 3 · answered Jun 23 '11 at 11:16

1

Keep the #, and use preventDefault to stop the default click event from moving the window.

http://api.jquery.com/event.preventDefault/

answered Jun 23 '11 at 11:16

Nick

11,475
1
36
47

Trouble using 'link_to' and jQuery

3 Answers3