Cześć im próbuje zaimplementować zegar odliczający w aplikacji 4 szyn. natknąłem się na wtyczkę keith woods z podobnego pytania http://keith-wood.name/countdown.html. problemem jest uzyskanie prostego licznika odliczającegodo pracy, ponieważ nie mogę znaleźć żadnych prostych przykładów na szynach 4. Wszystko, co chcę zrobić, to dodać zegar odliczający, gdy tworzony jest konkurs, odliczanie czasu zaczynające się od 10 dni do wyświetlania w postaci = dni: godziny: minuty: sekundy
Pobrałem pakiet odliczający i dodałem * = jquery.countdown.css do app / assets / stylesheets / application.css
dodałem // = jquery.countdown.Do mojej aplikacji / asset / javasript / application.js i ja dodałem oba pliki css i js jquery.countdown do folderu app / views / layout. Mam również klejnot "jquery-rails" gem w moim pliku gem
mogę umieścić moją funkcję w pliku competition.js.coffee mam
$(function () {
$("#until2d").countdown({until: "+2d"});
});
i zadzwoń w moim widoku konkurencji, jak
<div id="until2d"></div>
moja aplikacja / widoki / konkurs show.html .... gdzie chcę, żeby pojawił się timer
<p id="notice"><%= notice %></p>
<p>
<strong>Prize:</strong>
<%= @competition.prize %>
</p>
<p>
<strong>Date:</strong>
<%= @competition.Date %>
</p>
<%= link_to "Edit", edit_competition_path(@competition) %> |
<%= link_to "Back", competitions_path %>
<h1>Timer</h1>
<div id="until2d"></div>
mój plik views / layouts / application.html.erb, w którym umieszczam odpowiednie tagi
<!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>
mój plik app / assets / javascript / application.js wygląda
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= jquery.countdown.js
Jeśli ktokolwiek mógłby mi powiedzieć, czy jestem na właściwej ścieżce, lub wskazać mi prosty tutorial, doceniłbym to dzięki
Odpowiedzi:
0 dla odpowiedzi № 1Zaktualizuj swój plik application.js do:
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.countdown.js
//= require_tree .
Tęskniłeś require przed jquery.countdown.js i prawdopodobnie potrzebujesz go przed swoim kodem.
Jeśli to jest problem, prawdopodobnie powinieneśzobaczyłem coś w twojej konsoli Javascript, jak "[Obiekt] nie ma odliczania metod" lub coś, co wskazywałoby na problem. Ponadto, jeśli spojrzysz na listę źródeł javascript (w narzędziach programistycznych przeglądarki lub na stronie źródłowej) powinieneś zobaczyć listę jquery.countdown.js (zakładając, że działasz w trybie deweloperskim - ponieważ w trybie programistycznym zasób aktywów służy wszystkie javascript oddzielnie, aby można było debugować tego rodzaju problemy).
aktualizacja
Po przejrzeniu pełnej podstawy kodu był tokombinacja źle umieszczonych plików javascript i niektórych złych javascriptów (javascript z mieszanym komentarzem do skryptów kawy). Powyższa poprawka jest prawdopodobnie podstawową poprawką, ale inne elementy będą trudne do udostępnienia tutaj. Dla wszystkich zainteresowanych istnieje żądanie ściągnięcia, które przenosi niektóre pliki dookoła i wykonuje pewne czyszczenie, które rozwiązało problem. https://github.com/Bob-sheehy/timer/pull/1
0 dla odpowiedzi nr 2
Jesteś pewien, że to nie jest kwestia Turbolinks?
Spróbuj, aby zainicjować swój kod:
jQuery(document).on("ready page:load", function() {
$(function () {
$("#until2d").countdown({until: "+2d"});
});
});
Od Turbolinks nie robi pełne zmiany strony na żądanie pobierania, document.ready wydarzenie nigdy się nie rozpala.