0

私は Ruby on Rails の初心者で、現在 railstutorial.org のチュートリアルを進めています。現在、Ruby on Rails と組み合わせて jQuery を使用しようとしていますが、問題が発生しているようです。

私のウェブサイトでは、ユーザーは Twitter と同様の方法で投稿を作成でき、各投稿には 140 文字の制限があります。ユーザーが入力できる残りの文字数を表示するための段落タグを作成しましたが、段落タグの値を設定および更新する方法がわかりません。テキストエリアの OnChange イベントを処理する必要があると考えました。イベント ハンドラーでは、textarea のテキストの長さを取得し、140 からそれを引き、その値を p タグの innerHTML に割り当てて、ユーザーが入力できる文字数を最終的に表示します。

以下のページの Ruby on Rails コードを確認できます。

<%= form_for(@micropost) do |f| %>
<%= render 'shared/error_messages', object: f.object %>

<div class="field">
    <%= f.text_area :content, placeholder: "Compose new micropost..." %>
</div>

<p id="charsremaining" style="text-align: right"></p>

<%= f.submit "Post", class: "btn btn-large btn-primary" %>

関心のある行は、「f.text_area」と「p id="charsremaining"」行です。ユーザーが f.text_area フィールドに入力した後に p タグの値を更新するための JavaScript コードを次に示します。

$('#micropost_content').change(function() {
textbox = $(this);
charsleft = (140 - textbox.val().length);

paragraph = $('charsremaining');
paragraph.innerHTML = charsleft + " characters remaining."; });

上記のコードでテキストエリアの OnChange イベントを監視していると思います。そうすることで、ユーザーが textarea フィールドに入力するたびに変更が検出され、p タグが正しい文字数で自動的に更新されます。問題は、私の JavaScript コードがまったく機能しないことです。上記の JavaScript コードを次のファイルに保存しました: /app/assets/javascripts/micropost.js

ファイルは Asset Pipeline によって処理されると思いますが、Pipeline が本当に認識しているかどうかはわかりません。さらに、JavaScript コードが特定の状況に対して正しいかどうかもわかりません。

どんな助けでも大歓迎です。長文失礼します。

編集[解決済み]:

SO: Micropost character countdown (Rails Tutorial, 2nd Ed, Chapter 10, Exercise 7)のどこかで答えを見つけたことがわかりました。最初の回答を参照してください。

しかし、何が問題だったのか知りたい方のために説明すると、私は jQuery の document.ready イベントを聞いていませんでした。Ruby on Rails には既に含まれていると思い込んでいたと思います。これが私の最終的な JavaScript コードです (まだ /app/assets/javascripts/micropost.js として保存されています):

function UpdateCharsRemaining()
{
    var textbox = $('#micropost_content');
    var charsleft = (140 - textbox.val().length);

    var paragraph = $('#charsremaining');

    var text = charsleft + (charsleft != 1 ? " characters" : " character") + " remaining";

    paragraph.text(text);
}

$(document).ready(function($)
{
    UpdateCharsRemaining();

    $('#micropost_content').change(UpdateCharsRemaining);
    $('#micropost_content').keydown(UpdateCharsRemaining);
    $('#micropost_content').keyup(UpdateCharsRemaining);
});
4

0 に答える 0