Error- After Adding a Text Counter on Home Page ( Count remaining characters using Jquery)- require a refresh of Page

Question

while going through the exercise on Railstutorial(chapter 10), i have used Jquery to count remaining characters in Textarea. It actually works but only, when i refresh my page for atleast one time per signin. that means query is not executing until the page is refreshed for one time after every signin and there after it is working perfectly. I have used css for .countdown method.

So, my question is..why it is required me to refresh page to see remaining chars on the page and also, is there are some better methods.Can Some one suggest 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 content 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 login and go to Home Page (without refreshing the page)

view of Page without-refresh

and Here is the image when i login,go to Home Page and refresh the page

enter image description here

Have you done _any_ debugging yourself so far? – CBroe Oct 17 '13 at 06:47 — CBroe, Oct 17 '13 at 06:47
What kind of debugging you are asking me to do?.. – Abhinay Oct 17 '13 at 12:01 — Abhinay, Oct 17 '13 at 12:01

score 2 · Answer 1 · answered Jul 08 '14 at 10:07

Try this.

$(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
        }
    });
});

Here's a fiddle http://jsfiddle.net/6C8zn/

score 0 · Accepted Answer · edited May 23 '17 at 12:22

UPDATE

Finally I have realized it was a bad decision to remove Turbolinks all together just to make this counter example work. updating my answer with the piece of code which works well with Turbolinks. generated a coffee-script version from here: 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

Finally got my answer after seeing so many posts on jQuery and JavaScript... here Add a JavaScript on Home Page jquery-micropost char counter here character-countdown-like-twitter ...

but none has worked for Rails 4.0 as its the issue with turbolinks.

Thanks to "Lan" (user:288863)..his solution did the trick...

Actually we can solve this issue simply by removing " //= require turbolinks " in app/asset/javascript/application.js file.and Done.

Another method is to use "jquery.turbolinks" , I found some issue with this gem so, i would suggest to go by removing turbolinks line and further more you can see this post where the answer to the same question has been explained.Answer By User Lan You Just need to restart after following each and every step on that post.

Error- After Adding a Text Counter on Home Page ( Count remaining characters using Jquery)- require a refresh of Page

2 Answers2

Linked