0

这个片段来自我的管理员。我在图像旁边有一个描述字段，以及它下面的演示。

现在它在页面刷新后工作，但我希望它使用 AJAX 异步工作，所以当用户键入它时，它会更新 textarea 下面的演示。在此处输入图像描述

#This is where you update the field
<tr><th>Description</th><td><%= f.text_area(:description) %></td></tr>

    <tr><th>Demo</th>
      <td>
      <% if @org.images.present?  %>
          <table border="0">
            <tr>
            <td>
            <%= featured_image_tag(@org, :type => 'organization')  %>
            </td>
            <td style="vertical-align:top;padding-top:5px;padding-left:5px;">
            <span class="font-avebook"><%= @org.description  %>  </span><br> 
            </td>
            </tr>
            </table>
          <% else   %>    
        You need to assoicate an image first before seeing the demo!
      <% end  %>    
    </td>
</tr>
4

1 回答 1

1

要让文本在您编写的同时直接出现在下方，您需要使用jQuery Keyup事件来提交数据。但是，在每次键入后提交数据并不是最好的主意。如果您想获得这种效果，为什么不直接使用 jQuery 完成整个操作而不实际保存数据。您可以在每次键入后将输入内容附加到图像旁边的元素。我在下面做了一个小演示。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input type="text" id="copy_text">
  <div id="mirror_paragraph"></div>
<script>
    $("#copy_text").keyup(function () {
      var txt = $("#copy_text").val();
      $("#mirror_paragraph").html(txt);
    });
</script>

</body>
</html>​​​​​​​​​​​

适应您的代码：

<tr>
  <th>Description</th>
  <td><%= f.text_area(:description), :id => "copy_text" %></td>
</tr>

<tr>
  <th>Demo</th>
  <td>
    <% if @org.images.present? %>
        <table border="0">
          <tr>
            <td>
              <%= featured_image_tag(@org, :type => 'organization') %>
            </td>
            <td style="vertical-align:top;padding-top:5px;padding-left:5px;">
              <span class="font-avebook" id="mirror_paragraph"><%= @org.description %>  </span><br>
            </td>
          </tr>
        </table>
    <% else %>
        You need to assoicate an image first before seeing the demo!
    <% end %>
  </td>
</tr>

<script>
    $("#copy_text").keyup(function () {
      var txt = $("#copy_text").val();
      $("#mirror_paragraph").html(txt);
    });
</script>
于 2012-09-26T01:58:49.380 回答