JQuery 手机和 link_to

Question

以下代码适用于我网站的桌面版，也就是说单击按钮 links 到 langs_path:

<%= link_to "Continue Quiz!", langs_path, class: "btn btn-large btn-primary"%>

对于我使用 jQueryMobile 的网站的移动版本，我使用这个：

<%= link_to "Continue Quiz!", langs_path, "data-transition"=>"slide", class: "ui-btn ui-corner-all buttonMargin"%>

当我使用移动版时点击继续测验！按钮显示永不消失的页面加载器动画。

当我查看 rails 服务器时，在桌面版本上单击按钮后得到以下信息：

Started GET "/langs" for 127.0.0.1 at 2015-03-18 18:04:16 -0600
Processing by LangsController#index as HTML
  User Load (0.5ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 2 LIMIT 1
  Lang Load (1.2ms)  SELECT "langs".* FROM "langs" ORDER BY id LIMIT 10 OFFSET 321
  Rendered shared/exercises/_learnEnglishSpeakSpanishWordScrambleSpanishTop.html.erb (0.7ms)
  Rendered shared/_indexAction.html.erb (35.6ms)
  Rendered langs/index.html.erb within layouts/application (36.5ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.4ms)
  Rendered layouts/_footer.html.erb (0.3ms)
Completed 200 OK in 52ms (Views: 47.5ms | ActiveRecord: 1.7ms)

其次是所服务的所有各种资产。

当我查看 rails 服务器时，在移动版本上单击按钮后得到以下信息：

Started GET "/langs" for 127.0.0.1 at 2015-03-18 18:17:25 -0600
Processing by LangsController#index as HTML
  User Load (1.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 2 LIMIT 1
  Lang Load (0.8ms)  SELECT "langs".* FROM "langs" ORDER BY id LIMIT 10 OFFSET 321
  Rendered shared/exercises/_learnEnglishSpeakSpanishWordScrambleSpanishTop.mobile.erb (0.1ms)
  Rendered shared/_indexAction.mobile.erb (2.7ms)
  Rendered langs/index.mobile.erb within layouts/application (3.1ms)
  Rendered layouts/_shim.mobile.erb (0.0ms)
  Rendered layouts/_header.mobile.erb (0.3ms)
  Rendered layouts/_footer.mobile.erb (0.3ms)
Completed 200 OK in 22ms (Views: 16.6ms | ActiveRecord: 1.7ms)

随后是正在提供的单一资产。

我能发现两者之间的唯一区别是所提供的资产数量以及所提供的移动和桌面视图。相同的控制器代码用于两种 link_to 方法。

想知道是什么原因造成的吗？

编辑 1:

另一个有趣的行为是：

当我使用桌面版并单击“继续测验”时，link 的工作方式如上所述。如果在桌面版的测验页面上切换到移动视图，则测验页面的移动视图可以正常工作。单击返回继续测验 link 所在的移动主页，然后单击继续测验按钮现在可以在以前没有的地方使用。

这里有一些图片可以帮助说明以上内容：

首先问题，点击继续测验挂在主页上。您可以在联系人上看到加载图标 link:

现在从桌面主页开始：

然后点击继续测验：

现在切换到移动视图：

产生以下结果：

现在返回移动主页并单击继续测验即可：

有什么想法吗？这个让我难住了。

Answer 1

我看到的区别是您在移动版本中添加了 "data-transition"=>"slide"。这显然应该触发 jQuery 移动幻灯片过渡，但它不能正常工作，这就是 "you're stuck with a page loader animation that never goes away."

的原因

我无法告诉您为什么它不起作用，但这就是问题所在，jQuery 移动幻灯片切换不起作用。你可以找出原因，或者只是删除 data-transition 属性。

JQuery 移动转换可能与您正在进行的其他操作不兼容，可能是 Rails 在最新版本中默认安装的 Turbolinks。您可以尝试禁用 Turbolinks，无论是在移动版本中还是在所有地方。 http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

Answer 2

您可以执行以下操作

在浏览器控制台检查 js 错误
检查开发人员工具的网络选项卡，查看是否有来自 server.And 的响应表明请求没有失败。
检查是否存在回调，以便 jQuery 移动设备收到响应。它需要知道如何处理返回的内容。 - 在你的情况下，这可能不是必需的，因为你只是想打开一个页面。
您的 rails 控制器 returns XHR 请求有什么不同吗？这肯定会导致这个问题。
不使用 jquery 并只做一个简单的重定向怎么样：this.location.href = "" ?

Answer 3

这是错误，我自己也遇到过。由于 jQuery 动画和 turbolinks 的错误，应该触发的动画没有被触发。我认为如果您将 pass remote: false 设置为 link 它应该可以工作。如果做不到这一点，您可以在移动版本或应用程序中完全禁用 turbolinks。它肯定与 turbolinks 相关，并且 remote: false 传递给 link_to 助手将阻止 turbolinks 作用于 link，因为它插入 data-remote="false" 到在浏览器中呈现的 link。

另外请注意，在 <head> 或 </body> 之前，您在哪里加载 javascript？如果你装在头上，就往下半身移动。

JQuery 手机和 link_to

JQuery Mobile and link_to

javascript

mobile

jquery

ruby-on-rails

jquery-mobile