CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxruby-on-rails-4
Brettski
Brettski

Reputation: 1051

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

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 %>

Upvotes: 0

Views: 1762

Answers (2)

Richard Peck
Richard Peck

Reputation: 76784

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?

Upvotes: 1

bmac151
bmac151

Reputation: 525

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(); }); });

Upvotes: 0

Related Questions