错误 - 在主页上添加文本计数器（使用Jquery计算其余字符） - 需要刷新页面

问题描述

在练习Railstutorial（第10章），我使用Jquery计数Textarea中的剩余字符。它实际上工作但只有，当我刷新我的网页至少一次每次登录。这意味着查询不会执行，直到页面刷新一次后每次登录和完全工作后。我已经使用css的.countdown方法。

所以，我的问题是，这是要求我刷新页面看到页面上剩余的字符，有一些更好的方法。有人建议我发生在这里??

Css代码

  .countdown {
 display：inline; 
 padding-left：10px; 
 color：＃338333; 
} 
  

这里是micropost.js.coffee的代码

  updateCountdown =  - > 
 remaining = 140  -  jQuery（＃micropost_content）。val（）。length 
 jQuery（。countdown）。文本剩余+剩余字符
 
 
 jQuery  - > 
 updateCountdown（）
 $（＃micropost_content）。change updateCountdown 
 $（＃micropost_content）。keyup updateCountdown 
  

这里是_micropost_form.html.erb 的内容

 <％= form_for（@micropost）do | f | ％> 
<％= render'shared / error_messages'，object：f.object％> 
< div class =field> 
<％= f.text_area：content，placeholder：最大字符数：140％> 
 
< / div> 
<％= f.SubmitPost，class：btn btn-large btn-primary％> 
< span class =countdown>< / span> 
<％end％> 
  

这是我登录时转到主页的图像（ / strong>）

，这里是我登录，转到主页并刷新页面时的图片

解决方案

UPDATE

最后我意识到这是一个错误的决定删除 Turbolinks 所有在一起只是为了使这个反例的工作。请使用适用于 Turbolinks 的代码更新我的答案。从此处生成了一个咖啡脚本版本：

  ready = undefined 
 
 ready =  - > 
 totalChars = 100 
＃textarea中允许的总字符
 countTextBox = $（'＃textareabox'）
＃Textarea输入框
 charsCountEl = $（'＃countchars' ）
＃剩余字符数将显示在这里
 charsCountEl.text totalChars 
＃count的初始值元素
 countTextBox.keyup  - > 
 #user释放键盘上的键
 thisChars = @ value.replace（/{.*}/ g，''）.length 
 #get textarea中的字符数
如果thisChars> totalChars 
 CharsToDel = thisChars  -  totalChars 
＃要删除的额外字符
 @value = @ value.substring（0，@ value.length  -  CharsToDel）
 #remove多余字符textarea 
 else 
 charsCountEl.text totalChars  -  thisChars 
 #count剩余字符
 return 
 return 
 
 $（document）.ready ready 
 $（document）.on'page：load'，ready 
＃加载页面时加载javascript 
  

在jQuery和JavaScript上看到这么多帖子后，我得到了我的回答...
这里 ...

Rails 4.0是 turbolinks 的问题。

感谢Lan（用户：288863） 。

实际上，我们可以通过删除 app / asset / javascript / application中的 // = require turbolinks 另一个方法是使用jquery.turbolinks，我发现这个gem的一些问题，所以，我建议去删除turbolinks行，进一步你可以看到这篇文章，解决了同一个问题的答案。您只需在该帖子的每一步之后重新启动。

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)

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

解决方案

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 Pagejquery-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.jsfile.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.

这篇关于错误 - 在主页上添加文本计数器（使用Jquery计算其余字符） - 需要刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！