Scroll bar jumps back to the top when the hide link is clicked

Question

Actually I have got a more number of records in my index page with respective "hide"link on each record. Then problem is when I click the respective link it hides the record but moves to the top of the page, how do I stop this?

_rak361.html.erb

<%= link_to "Hide", hide_rak361_path(rak361), method: :put, class: 'stopper', style: "color:#ccc;" %>

ample.js

$( document ).ready(function() {

    $(".stopper").click(function(event) {
        event.preventDefault();
    });

});

rak361s_controller.rb

def hide
        @rak361 = Rak361.find(params[:id])
        @rak361.hide
        flash[:notice] = 'Rak361 was successfully hidden.'
        redirect_to rak361s_url    
end

I have tried but it is not working for me.

Any suggestions are most welcome.

Thank you in advance.

Possible duplicate of [Rails 4: how to use $(document).ready() with turbo-links](http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links) — Vucko, Oct 05 '16 at 07:51

score 1 · Accepted Answer · answered Oct 05 '16 at 07:59

1

Thats because its a full page reload, first thing you need to to do is to use path helpers instead of mentioning controller and action in link_to, and the second thing is you should use remote: true option to ajaxify the request. Here's an example

= link_to "Hide", example_hide_path(id), method: :put, remote: true, class: 'stopper', style: "color:#ccc;"

Either you can use remote: true, or you can send an ajax request using jQuery's $.ajax().

Hope that helps!

answered Oct 05 '16 at 07:59

Rajdeep Singh

17,621
6
53
78

Thank you for the reply.I updated my post as per your suggestion and I am not using any ajax in order to use "remote: true" option but still the issue persists.Please guide... – Muhammad Yaseen Oct 05 '16 at 09:42
I just want to hide the records by clicking the hide link and retain there for any second hide.That's all. – Muhammad Yaseen Oct 06 '16 at 05:09
Sir, waiting for your reply. – Muhammad Yaseen Oct 08 '16 at 13:06
It is moving to the top because the request is not async, because of which the page is reloading. You can implement it via Ajax to avoid this. I can help you with that, may be we can move this conversation to chat. Let me know when you are available. – Rajdeep Singh Oct 08 '16 at 20:03
And I would definitely like to do it through Ajax. – Muhammad Yaseen Oct 09 '16 at 10:20
Add remote: true to the link – Rajdeep Singh Oct 10 '16 at 06:11
Thanks for the reply. Let's have the discussion in chat. – Muhammad Yaseen Oct 10 '16 at 06:22

Scroll bar jumps back to the top when the hide link is clicked

1 Answers1