JQuery Mobile和link_to
[英]JQuery Mobile and link_to
问题描述
以下代码适用于我的网站的桌面版本，也就是说单击按钮链接到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：
另一个有趣的行为是：
当我在桌面版本上并单击继续测验时，链接按上述方式工作。 如果在测验页面的桌面版本上，我切换到移动视图，则测验页面的移动视图可以正常工作。 单击返回继续测验链接所在的移动主页，然后单击继续测验按钮现在可以在之前没有的地方工作。
这里有一些图片来帮助说明上述内容：
首先是问题，点击继续测验会在主页上挂起。 您可以在联系链接上看到加载图标：
现在从桌面主页开始：
然后点击继续测验：
现在切换到移动视图：
产量如下：
现在返回移动主页并单击继续测验工作：
有任何想法吗？ 这个让我难过。
3 个解决方案
解决方案1
2 已采纳 2015-03-27 19:33:20
这是错误，我自己遇到过。 由于jQuery动画和turbolinks的错误，应该被触发的动画没有被触发。 我想如果你把pass remote: false设置为它应该工作的链接。 如果做不到这一点，您可以在移动版本或应用程序中完全禁用turbolinks。 这肯定是turbolinks相关的和一个remote: false传递给link_to帮助器将阻止turbolinks作用于该链接，因为它将data-remote="false"插入到浏览器中呈现的链接。
另外请注意，在<head>或</body>之前加载javascript的位置是什么？ 如果将其装入头部，请将其移至下半身。
解决方案2
1 2015-03-19 02:12:18
我看到的不同之处在于您将"data-transition"=>"slide"到移动版本中。 这显然应该触发jQueryMobile幻灯片转换，但这不能正常工作，这就是为什么“你坚持使用永远不会消失的页面加载器动画。”
我无法告诉你为什么它不起作用，但这就是问题，jQuery Mobile幻灯片转换不起作用。 您可以找出原因，或者只删除数据转换属性。
JQuery Mobile转换可能与您正在进行的其他操作不兼容，可能是最近版本中Rails默认安装的Turbolinks。 您可以尝试禁用Turbolinks，无论是在移动版本还是在任何地方。 http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4
解决方案3
1 2015-03-25 10:54:35
这是你可以做的
- 在浏览器控制台中检查js错误
- 检查开发人员工具的网络选项卡，看看是否有来自服务器的响应。并且请求没有失败。
- 检查jQuery mobile获取响应时是否存在回调。 它需要知道如何处理返回的内容。 - 可能在你的情况下这不是必需的，因为你只是想打开一个页面。
- 您的rails控制器是否为XHR请求返回了不同的内容？ 这肯定会导致这个问题。
- 如何不使用jquery，只是做一个简单的重定向，如：this.location.href =“”？
用jQuery单击rails link_to
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.