0

このスニペットは私の管理者からのものです。画像の横に説明フィールドがあり、その下にどのように表示されるかのデモがあります。

現在、ページの更新後に機能しますが、AJAXを使用して非同期で機能するようにしたいので、ユーザーが入力すると、テキストエリアの下のデモが更新されます。ここに画像の説明を入力してください

#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

書き込みと同時にテキストを真下に表示するには、jQueryKeyupイベントを使用してデータを送信する必要があります。ただし、各キーアップの後にデータを送信することは最善の方法ではありません。その効果を得たい場合は、実際にデータを保存せずに、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 に答える