Невозможно отобразить таймер обратного отсчета в рельсах

Я использую плагин с цифрой для подсчета голосов (url: https://github.com/Reflejo/jquery-countdown) в приложении для моих рельсов. Я поместил файл jquery.countdown.js в активы/javascript и использовал // = require jquery.countdown в application.js и поместил digits.png в папку с ресурсами. Я использую следующий кодНевозможно отобразить таймер обратного отсчета в рельсах

<body>  
<script> 
$('.counter').countdown({ 
image: "url('/assets/digits.png')", 
format: "mm:ss", 
endTime: new Date(2014,1,2,18,05), 
timerEnd: function() { alert('end!!'); } 
}); 
</script> 
<div class="counter"></div> 
</body>

И application.js код

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

Проблема в том, я могу получить предупреждение после того, как закончится отсчет времени, но не смог увидеть/загрузить таймер Coundown в передней части. Может кто-нибудь помочь мне разобраться в проблеме.

источник

2014-01-02 monu

показать ваше приложение.js – beck03076

Код приложения.js добавлен. – monu

Вы используете конвейерную обработку активов? – arun15thmay

Вы должны требовать его перед require_tree .

источник

2014-01-02 13:22:06 toolz

еще такой же проблема. – monu

Выньте турбовинты и посмотрите, что произойдет.Если он работает после удаления turbolinks, вам может понадобиться https://github.com/kossnocorp/jquery.turbolinks – toolz

Снова такая же проблема. – monu

Следующие работы для меня. Поместите функцию обратного отсчета внутри $ (function() {});

Это означает, что после загрузки DOM вы запрашиваете jQuery для привязки обратного отсчета к «счетчику» div.

Кроме того, не указывайте url() в параметре images функции обратного отсчета. На самом деле просто вставьте digits.png в общую папку и удалите параметр изображения из функции обратного отсчета. Пусть компьютер работает для вас!

<script> 
$(function(){ 
    $('.counter').countdown({ 
    images: "digits.png", 
    format: 'hh:mm:ss', 
    endTime: "12:32:55", 
    timerEnd: function() { alert('end!!'); } 
    }); 
}); 
</script>

источник

2014-01-02 13:44:25 beck03076

это сработало ?????? – beck03076

Не работал для меня. но он показывает два полуконуса. Кстати, я могу узнать, где вы сохранили файл .js и как вы ссылались на него в файле application.js. – monu

Поместите свой обратный отсчет js в app/assets/javascripts и удалите эту строку «// = require jquery.countdown» из приложения.js – beck03076

При использовании плагин, как это, рекомендуется поместить его в vendor каталоге, поэтому в этом плагине есть 3 папки: css, img и js, во-первых, загрузить эти папки затем принимать файлы, которые вы хотите внутри каждой папки, например, в папке js есть jquery.countdown.js и jquery.countdown.min.js, эти два файла одинаковы, только второй сжимается и более удобен для использования в производстве, первый из них не сжимается, и вы можете использовать его в разработке, чтобы иметь читаемый код, если вы хотите посмотреть, как работает плагин ..., поэтому используйте один из них. для css есть один файл с именем media.css, не забудьте скопировать изображения, которые вы хотите, которая находится внутри папки img слишком

второго шага: поместите файл JS под /vendor/assets/javascript и media.css под vendor/assets/stylesheets, вы можете на данный момент место изображение, которое вам нужно с вашим media.css, или поместите его, как вы делаете, под /assets/images/, просто обратитесь к нему, используя правильный путь, когда вы звоните $('.counter').countdown()

Последний шаг - потребовать, чтобы ваши js и css-файлы в application.js и application.css:

application.js

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

application.css

..... 
//= require media 
....

также не забудьте положить скрипт в $ (функция() {// Ваш скрипт}), чтобы убедиться, что ваш $('.counter') элемент загружен до применение .countdown() функция к ней как @ beck03076 говорит

источник

2014-01-02 13:56:01 medBo

Невозможно отобразить таймер обратного отсчета в рельсах

ответ

Смежные вопросы