0

Railstutorial (第 10 章) の演習を行っているときに、Jquery を使用して Textarea の残りの文字をカウントしました。実際には機能しますが、サインインごとに少なくとも1回ページを更新した場合にのみ機能します。つまり、サインインのたびにページが 1 回更新され、ページが完全に機能するようになるまで、クエリは実行されません。.countdown メソッドに css を使用しました。

だから、私の質問は..ページに残っている文字を表示するためにページを更新する必要があるのはなぜですか?また、より良い方法がいくつかありますか?

CSS コード

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

これが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

ここに _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 %>

これは、ログインしてホームページに移動したときの画像です（ページを更新せずに）

更新なしのページのビュー

ログインしたときの画像は次のとおりです。ホームページに移動してページを更新します

ここに画像の説明を入力

4

2 に答える 2

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/

于 2014-07-08T10:07:52.290 に答える
0

アップデート

最後に、この反例を機能させるためだけにターボリンクをまとめて削除したのは悪い決定だったことに気付きました。Turbolinksでうまく機能するコードで私の答えを更新します。ここからコーヒースクリプトバージョンを生成しました: 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 カウンターはこちらcharacter-countdown-like-twitter ...

しかし、ターボリンクの問題としてRails 4.0で機能したものはありません。

"Lan" (user:288863) のおかげで..彼のソリューションはうまくいきました...

実際には、 app/asset/javascript/application.jsファイルの「 //= require turbolinks」を削除するだけで、この問題を解決できます 。

もう 1 つの方法は、「jquery.turbolinks」を使用することです。この gem でいくつかの問題が見つかったので、turbolinks 行を削除することをお勧めします。さらに、同じ質問に対する回答が説明されているこの投稿を参照できます。Answer By User Lanその投稿のすべての手順を実行した後、再起動する必要があります。

于 2013-10-17T17:37:17.343 に答える