Question

以下代码适用于我网站的桌面版本，也就是说点击按钮链接到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方法都使用相同的控制器代码。

关于可能导致这种情况的任何想法？

EDIT1：

另一个有趣的行为是：

当我在桌面版本上并点击继续测验时，链接的工作方式如上所述。如果在测验页面的桌面版本上，我切换到移动视图，则测验页面的移动视图可以正常工作。单击返回到继续测验链接所在的移动主页，然后单击继续测验按钮现在可以在之前没有的情况下工作。

以下是一些有助于说明上述内容的图片：

首先是问题，点击继续测验会在主页上挂起。您可以在联系链接上看到加载图标：

enter image description here

现在从桌面主页开始： enter image description here

点击继续测验：

enter image description here

现在切换到移动视图： enter image description here

产生以下结果： enter image description here

现在返回移动主页并点击继续测验工作： enter image description here

有什么想法吗？这个让我很难过。

Answer 1

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

另外请注意，您在<head>或</body>之前加载javascript的位置是什么？如果将其装入头部，请将其移至下半身。

Answer 2

我看到的不同之处在于您向移动版本添加了"data-transition"=>"slide"。这显然应该触发jQueryMobile幻灯片转换，但这不能正常工作，这就是为什么＆＃34;你仍然坚持一个永不消失的页面加载器动画。＆＃34;

我无法告诉你它为什么不起作用，但问题是，jQuery Mobile幻灯片转换无法正常工作。您可以找出原因，或者只删除数据转换属性。

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

Answer 3

这是你可以做的事情

在浏览器控制台中检查js错误
检查开发人员工具的网络选项卡，看看是否有来自服务器的响应。并且请求没有失败。
检查jQuery mobile获取响应的时间是否存在回调。它需要知道如何处理返回的内容。 - 可能在你的情况下，这不是必需的，因为你只是想打开一个页面。
您的rails控制器是否为XHR请求返回了不同的内容？这肯定会导致这个问题。
如何不使用jquery，只需执行一个简单的重定向：this.location.href =＆＃34;＆＃34; ？

JQuery Mobile和link_to

3 个答案: