7

I have a Rails 5 application and would very much like to use Turbolinks.

Within the application there are several PATCH ajax calls that simply update the server with new data, but do not need to worry about updating the state of the page.

Whenever these ajax requests return, Turbolinks refreshes the page and the browser scrolls to the top of the screen. This is not desirable behavior; it is much preferred that things just stay put where they are.

Disabling Turbolinks eliminates the problem.

Example (super basic) ajax call that causes the problem:

$.ajax({
  method: "PATCH",
  url: url,
  data: obj
});

Is anyone else experiencing this or have any ideas on how to prevent the page scroll from occurring?

mindtonic
  • 1,385
  • 2
  • 14
  • 24
  • hi @mindtonic do you try with event.preventDefault() ? – Ezequiel García Apr 01 '16 at 16:23
  • @EzequielGonzálezGarcía - Yes, I tried that in every location that has an event object. Some of the ajax calls are triggered by callbacks from plugins, some are triggered by functions that I have written. In all cases, the page refreshes and the screen moves. :( – mindtonic Apr 01 '16 at 16:32
  • ok when i want exclude something for turbolinks i use data-no-turbolink for example Articles you can use in the tag where you make the call ajax, try and tell me hehehe – Ezequiel García Apr 01 '16 at 16:37

3 Answers3

1

Had the same problem and found a solution via another StackOverflow question.

The idea is to make a JS request to Rails (using the dataType and format options):

$.ajax({
    method: "PATCH",
    url: url,
    dataType: 'script',
    format: 'js',
    data: obj
});

In your rails controller, simply respond to this JS call with:

respond_to do |format|
    format.js
end

No page reload!

Community
  • 1
  • 1
Ced
  • 51
  • 6
  • I have a similar setup and this breaks the json-call, and still scrolls the page up. However, I have to agree: the content is not always refreshed. – Katinka Hesselink Oct 09 '17 at 13:01
1

I found the answer here: Turbolinks documentation on Github.

Step 1: replace the usual document.ready with a custom turbolinks:load.

step 2: make sure to specify that the type is json

document.addEventListener('turbolinks:load', function() {
// your ajax code: 
    $.ajax({
        method: 'PATCH',
        url: url,
        dataType: 'json'
    })
}
Katinka Hesselink
  • 3,961
  • 4
  • 20
  • 26
0

Add the data-no-turbolink=true attribute to the <a> triggering the AJAX call or the <body> tag.

See: https://github.com/turbolinks/turbolinks-classic/issues/19 Another SO post with a question similar to yours: Rails 4: disable Turbolinks in a specific page

Community
  • 1
  • 1
Anthony E
  • 11,072
  • 2
  • 24
  • 44
  • Hmmm... Well, these calls are not tied to an anchor element, and I actually don't want to remove it from the entire body element, just the specific ajax call. I want Turbolinks to function as normal everywhere else. – mindtonic Apr 01 '16 at 19:01
  • So you want to disable it for just certain pages, correct? – Anthony E Apr 01 '16 at 19:02
  • No, just for certain, very specific jquery ajax calls. --- but really I just don't want the page to move when the ajax call is completed. – mindtonic Apr 01 '16 at 21:58