0

我是 Ruby on Rails 的初学者，目前正在阅读 railstutorial.org 上的教程。我目前正在尝试将 jQuery 与 Ruby on Rails 结合使用，但似乎遇到了麻烦。

在我的网站上，用户可以创建类似于在 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"”行。这是我的 JavaScript 代码，用于在用户输入 f.text_area 字段后更新 p 标记的值：

$('#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

我认为该文件将由资产管道处理，但我不确定管道是否真的识别它。此外，我不确定我的 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