Home/ Questions/Q 8586573
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T22:20:30+00:00

This snippet is from my admin. I have a description field next to an

  • 0

This snippet is from my admin. I have a description field next to an image, and a demo of how’d that look below it.

Right now it works after a page refresh but i’d like it to work asynchronously using AJAX, so as the user types it updates the demo below the textarea.enter image description here

#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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To get the text to appear directly below at the same time as you’re writing you need to use a jQuery Keyup event to submit the data. However, submitting the data after each keyup is not the best idea. If you want to get that effect, why don’t you just do the whole thing with jQuery without actually saving the data. You can append the contents of the input to the element beside the image after each keyup. I’ve made a little demo below.

    <!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>​​​​​​​​​​​

    Adapted to your code:

    <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>
    • 0