Счетчик символов для формы form_for, не обновляющей счет в реальном времени

Question

Я реализовал счетчик символов text_field формы, который работает внутри jsfiddle, но не внутри приложения. Появляется, но не считается в реальном времени, как в jsfiddle. Когда я перезагружу страницу, она будет считать текущие символы в текстовом поле.

У меня есть больше javascript на странице, но я попытался протестировать его, удалив все остальные java вместо coutner, и он все равно не будет работать.

Также странно, что у меня есть

minlength: 20, maxlength: 1000

Что, если не подтверждено, появится переключатель с счетчиком и будет считаться в реальном времени, пока не будет достигнута минимальная длина. Моя цель - перевести этот счетчик в текстовое поле, чтобы оно всегда показывало / подсчитывало символы

Вот мой код:

<%= form.label :description %>
<%= form.text_area :description, class: "form-control message", :rows => 10, minlength: 20, maxlength: 1000, required: true    %>
<span class="countdown"></span>

Jquery:

  jQuery(document).ready(function ($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

    });

    function updateCountdownAll() {
        $('.message').each(function () {
            updateCountdown(this);
        });
    }

    function updateCountdown(e) {

        var currentElement;
        if (e.target) {
            currentElement = e.target;
        } else {
            currentElement = e;
        }

        var maxLengh = $(currentElement).attr('maxlength');
        var remaining = $(currentElement).val().length;
        $(currentElement).nextAll('.countdown:first').text(remaining + '/' + maxLengh);
    }

JSFiddle: http://jsfiddle.net/4bozw3k5/

Могу ли я что-нибудь сделать с кодом, чтобы он работал в приложении rails? в режиме реального времени

Answer 1

Прежде всего, какие-либо сообщения об ошибках в инструменте проверки браузера? Установили ли вы гем jquery-rails, если нет, перейдите по ссылке ниже и установите его.

https://rubygems.org/gems/jquery-rails/versions/4.3.1

Во-вторых, это может быть связано с тем, что. live() устарел и согласно версии 1.9 полностью удален.

Попробуйте вместо этого использовать обработчик событий .on().

В-третьих, это очень много кода, граничащего с небольшим количеством спагетти-кода для чего-то действительно простого. Что бы я сделал, чтобы упростить это:

    $(".message").on("keyup", function () {
        var maxlength = $(this).attr("maxlength")
        var remaining = $(this).val().length
        $(this).next().text(remaining + '/' + maxLengh)
    })

Нет необходимости заключать его в $ (document) .ready (), слишком много $ (document) .ready () замедлит время загрузки (за счет увеличения времени сценариев) при обновлении приложения. В зависимости от того, как вы настроили ваше приложение rails для выполнения javascript, вы можете обернуть все ваши javascript / jquery в один большой $ (document) .ready (), который будет выполняться один раз , когда Обновление приложения.

Кроме того, .on () - это прослушиватель событий, который прослушивает и ждет, когда что-то произойдет, например, .on ("keyup", function (). Вы можете отключить прослушиватель событий, используя $(".message").off()

Немного чрезмерного совместного использования, но знание того, как слушатели событий и делегирование событий жизненно важно для написания хорошего jQuery.