Jquery Rails 4倒计时_Jquery_Ruby On Rails

Jquery Rails 4倒计时

jquery ruby-on-rails

Jquery Rails 4倒计时,jquery,ruby-on-rails,Jquery,Ruby On Rails,嗨，我正在尝试在rails 4应用程序中实现倒计时。我在一个类似的问题上遇到了基思·伍兹。问题是让一个简单的倒计时计时器工作，因为我在rails 4中找不到任何简单的例子。我所要做的就是在创建比赛时添加一个倒计时计时器，计时器从10天开始显示为=天：小时：分钟：秒我下载了倒计时包，并将*=jquery.countdown.css添加到app/assets/stylesheets/application.css 我在app/assets/javasript/application.js中添加了/

嗨，我正在尝试在rails 4应用程序中实现倒计时。我在一个类似的问题上遇到了基思·伍兹。问题是让一个简单的倒计时计时器工作，因为我在rails 4中找不到任何简单的例子。我所要做的就是在创建比赛时添加一个倒计时计时器，计时器从10天开始显示为=天：小时：分钟：秒

我下载了倒计时包，并将*=jquery.countdown.css添加到app/assets/stylesheets/application.css

我在app/assets/javasript/application.js中添加了//=jquery.countdown.js，并在app/views/layout文件夹中添加了jquery.countdown css和js文件。我的gem文件中还有gem'jqueryrails'gem

我是否将我的函数放在competition.js.coffee文件中我有

在我的竞争观点中，我们可以这样称呼它

<div id="until2d"></div>

如果有人能告诉我我的思路是否正确，或者给我介绍一个简单的教程，我将不胜感激。谢谢

将你的application.js文件更新为：

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.countdown.js 
//= require_tree .

您在jquery.countdown.js前面缺少了

require

，您可能需要它位于代码之前

如果这是问题所在，您可能应该在Javascript控制台中看到类似“[Object]没有方法倒计时”或指示问题的内容。此外，如果您查看javascript源代码列表（在浏览器开发工具或源代码页中），您应该会看到jquery.countdown.js列表（假设您在开发模式下运行-因为在开发模式下，资产管道会单独提供所有javascript，以便您可以调试这些问题）

更新

在查看完整的代码库之后，它是错误放置的javascript文件和一些糟糕的javascript（混合了咖啡脚本注释的javascript）的组合。上面的修复可能是最基本的修复，但是其他项目将很难在这里共享。对任何感兴趣的人来说，都有一个pull请求，它可以移动一些文件并进行一些清理，从而解决了这个问题

您确定这不是Turbolinks问题吗

尝试以下方法初始化代码：

jQuery(document).on("ready page:load", function() {
  $(function () { 
    $('#until2d').countdown({until: '+2d'});
  });
});

由于TurboLink不会对get请求进行整页更改，因此不会触发

document.ready

事件。

您是否检查过页面上是否包含您的竞赛代码？是否存在javascript控制台错误？基本设置看起来应该可以正常工作。顺便说一句，如果你不打算使用coffeescript，你也可以直接调用competition.js文件。嗨，罗杰斯四世先生在我希望计时器出现的地方添加了我的竞赛节目代码。我在competition.js文件ExecJS:：ProgramError in competition#show[stdin]：5:3：错误：保留字“function”尝试将competition.js.coffee代码更改为

coffeescript

，或将其另存为一个文件名（

competition.js

）并删除coffeescript文件。这个错误是Rails coffeescript编译器试图读取您的“javascript”并期望“coffeescript”Hi消除了错误，但计时器没有出现，我只是获取加热计时器，您认为我的功能正常吗？我没有看到问题。我让它再次在这里工作，我会查看页面上的javascript并确保您的函数在那里。您的application.js中是否有

require\u树。

？打开一个浏览器，确保它加载了你的competition.js源文件——仅仅因为它被编译了并不意味着它被加载了。如果一切正常，请尝试在该文件中添加一个控制台日志，以验证您是否在其中。您好，我已经教过了，但不幸的是，仍然无法在页面上显示计时器。我关闭了WebBrick并再次尝试，但仍然没有任何其他想法。感谢您发现缺少的requireI。我刚刚注意到您的布局存在另一个问题。如果已经在application.js和application.css（在资产下）中包含了js和css文件，则无需在应用程序布局中重新声明它们。你应该能够删除你放在正文部分顶部的和标签。我现在没有收到任何错误。当我从layout/application.html中删除链接和脚本标记时，文本只显示在我的competition/show.html.erb的顶部。我只是想知道是否应该在我的文件中包含插件附带的任何其他文件。我只添加了jquery.countdown.js和cssWell，我在这里不知所措。没有更仔细地查看整个设置。。。看来一切都应该顺利。是否有一个公开的网址，我可以点击？或者我可以看看git回购协议？嘿，罗杰斯先生，谢谢你的帮助，我会努力修复它，如果我没有找到我的github，我会把它链接到我的github上Mohamad，它试图添加你的代码，但仍然无法让计时器出现在页面上任何其他想法

<!DOCTYPE html>
<html>
<head>
  <title>Timer</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
<script type="text/javascript" src="js/jquery.plugin.js"></script> 
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<%= yield %>

</body>
</html>

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= jquery.countdown.js

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.countdown.js 
//= require_tree .

jQuery(document).on("ready page:load", function() {
  $(function () { 
    $('#until2d').countdown({until: '+2d'});
  });
});