Rails, button_to and link_to, remote: true scrolls page when clicked

Question

So I have a div at the bottom of the page. The following code for button_to and link_to work, but it scrolls back up to the top of the page when I click on them.

Any ideas on how to prevent this, the ajax load is nice but it needs to not move the screen when an ajax call is made

<%= button_to reports_path, class: 'btn btn-info btn-sm', remote: true do %>
  <i class="fa fa-calendar"></i> By Cumulative</button>
<% end %>

<%= link_to 'My Link', reports_path, remote: true %>

Answer 1

This type of behaviour is within the remit of HTML / JS (not Rails)

The typical scenario is you use the good old # href argument so you don't load any other page when you click the link, which basically tells your browser to scroll to the top of the page (like this):

<%= link_to "test", "#", remote: true %>

As you're using a specific link, I would surmise the problems would be:

1. You're not appending your received data properly
2. You've got an anchor on your page that's being called on click

I would firstly ensure your link is not linking to any anchor on your page. If you have a reference like this: #any_anchor , you should change it to something else, or we'll create a workaround. I don't think this will be the issue

Secondly, I would look at the data you're calling from Ajax. You mention a graph - how are you handling it on the page? If you're appending a large element to your page, you may well end up with effects like what you're seeing

---

Can you share what data you're expecting back? and the code you're using to handle it?

Answer 2

If it is jumping back up to the top of the screen, sounds like you are having the page reloaded still. Mohamad is correct, you will want to prevent the default action like he described, but you will need to do so after the ajax request has been performed.

Try this:

$(document).ready(function() { $(".btn-sm").on("ajax:success", function(e, data, status, xhr) { e.preventDefault(); }); });