comment_chars_counter counter not working in my app.

[ghost]

The maximum characters only displays 225 and doesn't change when text is typed in.

[luciuschoi]

First of all, you should check the following comments.coffee file:

assets/javascripts/comments.coffee :

$(document).on 'keyup', '.comment_content textarea', (e) ->
  comment_id = $(this).data('comment-id')
  counter = $("#comment_#{comment_id}_chars_counter")
  charsRemaining = 255 - ($(this).val().length)
  counter.text "Remaining : #{charsRemaining}"
  counter.css 'color', if charsRemaining < 0 then 'red' else '#818a91'
  return
···

Secondly, the code line starting withf.input :content should include data-comment-id attribute.

comments/_form.html.erb :

<div class="comment-form">
  <%= simple_form_for [comment.commentable, comment], remote: true do | f | %>
    <%= f.hidden_field :parent_id %>
    <%= f.input :content, label: false, placeholder: (f.object.parent_id.nil? ? 'Share your idea.' : 'Leave your reply.'), wrapper_html: { class: 'mb-1' }, input_html: { rows: 5, data:{ 'comment-id': (comment.persisted? ? comment.id : 'new') }} %>
    <span id="comment_<%= comment.persisted? ? comment.id : 'new' %>_chars_counter" class="comment_chars_counter">Remaining : 255</span>
    <div class='float-right'>
      <%= f.submit class: 'btn btn-primary btn-sm float-xs-right' %>
      <%= link_to "Cancel", "#", 'data-reply': comment.parent_id.present?, class: 'cancel-comment-link btn btn-primary btn-sm float-xs-right ml-1' if comment.persisted? or comment.parent %>
    </div>  
    <div class="clearfix"></div>
  <% end %>
</div>

[ghost]

Yep, i think everything is the same except for the f.text_area in the form.

comments/_form.html.erb

 <div class="comment-form">
     <%= bootstrap_form_for [comment.commentable, comment], remote: true do | f | %>
       <%= f.hidden_field :parent_id %>
       <%= f.text_area :content, label: false, placeholder: (f.object.parent_id.nil? ? 'Share your idea.' : 'Leave your reply.'), wrapper_html: { class: 'mb-1' }, input_html: { rows: 5, data:{ 'comment-id': (comment.persisted? ? comment.id : 'new') }} %>
    <span id="comment_<%= comment.persisted? ? comment.id : 'new' %>_chars_counter" class="comment_chars_counter">Remaining : 255</span>
    <div class='float-right'>
      <%= f.submit class: 'btn btn-primary btn-sm float-xs-right' %>
      <%= link_to "Cancel", "#", 'data-reply': comment.parent_id.present?, class: 'cancel-comment-link btn btn-primary btn-sm float-xs-right ml-1' if comment.persisted? or comment.parent %>
    </div>  
    <div class="clearfix"></div>
  <% end %>
</div>

And comments.coffee

$(document).on "click", '.cancel-comment-link', (e) ->
  e.preventDefault()
  replied = $(this).data('reply')
  # console.log replied
  $comment = $(this).closest('.comment')
  # console.log $comment
  $form = $(this).closest('form')
  $restore_link = $comment.find('a.delete-comment-link')[0]
  if replied is true
    $reply_link = $comment.find('a.reply-comment-link')[0]
    # console.log $reply_link
    $reply_link.href = "#{$restore_link.href}/reply"
  $edit_link = $comment.find('a.edit-comment-link')[0]
  # console.log $edit_link
  $edit_link.href = "#{$restore_link.href}/edit"
  $form.remove()

$(document).on 'keyup', '.comment_content textarea', (e) ->
  comment_id = $(this).data('comment-id')
  counter = $("#comment_#{comment_id}_chars_counter")
  charsRemaining = 255 - ($(this).val().length)
  counter.text "Remaining : #{charsRemaining}"
  counter.css 'color', if charsRemaining < 0 then 'red' else '#818a91'
  return

# Handle 401 error on ajax call.
$(document).ajaxError (_, xhr)->
  window.location = '/users/sign_in' if xhr.status == 401