Is it possible to disable Turbolinks for specific jQuery Ajax calls to prevent the page from refreshing and scrolling?

Question

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?

Answer 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!

Answer 2

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'
    })
}