Error - after adding a text counter on the home page (counting the remaining characters using jQuery) - you need to refresh the page

Question

Going through the Railstutorial exercise (chapter 10), I used Jquery to count the remaining characters in Textarea. It really works , but only when I refresh my page at least once for each click . this means that the request is not executed until the page is refreshed one time after each click and where it will work perfectly. I used css for the .countdown method.

So my question is: why do I need to refresh the page to see the remaining characters on the page, and also are there any better methods. Can someone tell me what is happening here?

Css code

 .countdown {
  display: inline;
  padding-left: 10px;
  color: #338333;
}

Here is the code for micropost.js.coffee

updateCountdown = -> 
  remaining = 140 - jQuery("#micropost_content").val().length
  jQuery(".countdown").text remaining + " characters remaining"


jQuery ->
  updateCountdown()
  $("#micropost_content").change updateCountdown
  $("#micropost_content").keyup updateCountdown

here is the contents of _micropost_form.html.erb

<%= form_for(@micropost) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Maximum characters: 140" %>    

  </div>
  <%= f.submit "Post", class: "btn btn-large btn-primary" %>
  <span class="countdown"></span>
<% end %>

Here is the image when I log in and go to the home page ( without refreshing the page )

And here is the image, when I login, go to the home page and refresh the page

Answer 1

UPDATE

, , , Turbolinks , . , Turbolinks. script : http://js2.coffee/

ready = undefined

ready = ->
  totalChars = 100
  #Total characters allowed in textarea
  countTextBox = $('#textareabox')
  # Textarea input box
  charsCountEl = $('#countchars')
  # Remaining chars count will be displayed here
  charsCountEl.text totalChars
  #initial value of countchars element
  countTextBox.keyup ->
    #user releases a key on the keyboard
    thisChars = @value.replace(/{.*}/g, '').length
    #get chars count in textarea
    if thisChars > totalChars
      CharsToDel = thisChars - totalChars
      # total extra chars to delete
      @value = @value.substring(0, @value.length - CharsToDel)
      #remove excess chars from textarea
    else
      charsCountEl.text totalChars - thisChars
      #count remaining chars
    return
  return

$(document).ready ready
$(document).on 'page:load', ready
# Loads javascript while loading page

- , jQuery JavaScript... JavaScript jquery-micropost char counter character-countdown-like-twitter...

Rails 4.0 turbolinks.

"Lan" (: 288863).. ...

, "//= require turbolinks" //javascript/application.js file.and Done.

"jquery.turbolinks", , , turbolinks, , . Answer By User Lan .

Answer 2

.

$(document).ready(function(){
    var totalChars      = 100; //Total characters allowed in textarea
    var countTextBox    = $('#counttextarea') // Textarea input box
    var charsCountEl    = $('#countchars'); // Remaining chars count will be displayed here

    charsCountEl.text(totalChars); //initial value of countchars element
    countTextBox.keyup(function() { //user releases a key on the keyboard
        var thisChars = this.value.replace(/{.*}/g, '').length; //get chars count in textarea
        if(thisChars > totalChars) //if we have more chars than it should be
        {
            var CharsToDel = (thisChars-totalChars); // total extra chars to delete
            this.value = this.value.substring(0,this.value.length-CharsToDel); //remove excess chars from textarea
        }else{
            charsCountEl.text( totalChars - thisChars ); //count remaining chars
        }
    });
});

http://jsfiddle.net/6C8zn/