javascript - 导轨 4 : Turbolinks sends request twice and reloads the page

标签 javascript ruby ajax ruby-on-rails-4.1 turbolinks

我正在使用 Rails 4.1.1 和 Ruby 2.1.0 开发 Ruby on Rails 应用程序。

我已将应用程序设置为使用 Turbolinks,这会导致 AJAX 链接出现问题。当我单击调用 AJAX 函数的链接时,会发生三件事:
1. AJAX调用
2.同一个链接重新加载
3. 应用服务器将所有请求运行两次。

如何使这些链接具有标准 AJAX 链接的功能?

作为引用,这里是我的 GemFile 的相关部分:

gem 'turbolinks'
gem 'jquery-turbolinks'

以下是我在 application.js 中包含 JavaScript 库的方式:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks

下面是我在应用程序布局中包含 JavaScript 文件的方式:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

最佳答案

可能有3个原因:

  • 您对该请求的响应状态在 400 到 600 之间
  • 您的响应内容类型不匹配 /^(?:text\/html|application\/xhtml\+xml|application\/xml)(?:;|$)/<
  • Assets 已在新页面中更改。 例如,您在包含另一个 js 的不同布局中呈现一个新页面。当 data-turbolinks-track 为真时,turbolinks 将刷新。

这三个原因可以从下面的源代码中得到。当response给出doc body时,它会显示它,或者刷新页面。

fetchReplacement = (url, onLoadFunction, showProgressBar = true) ->
  ...
  xhr.onload = ->
    triggerEvent EVENTS.RECEIVE, url: url.absolute
    if doc = processResponse()
      reflectNewUrl url
      reflectRedirectedUrl()
      changePage extractTitleAndBody(doc)...
      manuallyTriggerHashChangeForFirefox()
      onLoadFunction?()
      triggerEvent EVENTS.LOAD
    else
      document.location.href = crossOriginRedirect() or url.absolute

processResponse = ->
  clientOrServerError = ->
    400 <= xhr.status < 600

  validContent = ->
    (contentType = xhr.getResponseHeader('Content-Type'))? and
      contentType.match /^(?:text\/html|application\/xhtml\+xml|application\/xml)(?:;|$)/

  ...

  //here is the check
  if not clientOrServerError() and validContent()
    doc = createDocument xhr.responseText
    if doc and !assetsChanged doc
      return doc

关于javascript - 导轨 4 : Turbolinks sends request twice and reloads the page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26294575/

相关文章:

ruby-on-rails - Heroku db pull 错误,它正在寻找 sqlite3 但我有 postgres,如何更改它?

ruby-on-rails - Rails + tinymce-rails 奇怪的错误

php - 如何替换 html 表格 onchange 的单列

javascript - 小型 Ajax JavaScript 库

javascript - "this"不是我想要的

javascript - 如何创建在 Angular promise 中捕获的错误

javascript - Array.prototype.slice.call(arguments) 和 Array.apply(null, arguments) 之间的区别

javascript - 从 IE11 到谷歌的 GET 不起作用

javascript - 返回( dispatch )未解雇

ruby - 来自原点的坚固合并提交不会更新工作树