index.html.erb

<h3><%=t('head_title.share_your_stories')%></h3>

<div class="new_timeline_link">
<%= link_to t('timelines.add_your_story'), new_timeline_path, remote: true, id:"new_timeline_link" %>
</div>
<div id="new_timeline_form"></div>

  <div id="timelines" class="timelines">
<% if @timelines.size > 0 %>
    <%= render @timelines %>
  <%= will_paginate @timelines %>
  <%= pageless(@timelines.total_pages, timelines_path, "#timelines") %>
<% else %>
  <div style="padding:1em;text-align:center;">
    <h3>Congraturations!</h3>
    <p>You are the first to post a story.</p>
  </div>
<% end %>
  </div>

<br />
<br />

<script type="text/javascript">

  $('.reply_body').on("keyup", (function(e)
  {
    if (e.keyCode == 13)
    {
      var form = $(this).closest("form")[0];
      var replyable_type = form.elements['reply[replyable_type]'].value;
      var replyable_id = form.elements['reply[replyable_id]'].value;
      var body_text = form.elements['reply[body]'].value;
      var url = "/" + replyable_type.toLowerCase() + "s/" + replyable_id + "/replies.json";
      var data = { utf8: "✓", reply: { replyable_type: replyable_type, replyable_id: replyable_id, body: body_text}};
      $.post(url,data,function(response, status){
        $("#replies_of_replyable_" + replyable_id).append("<div>" + response + "</div>");
        $("#add_reply_to_replyable_"+replyable_id+" form")[0].reset();
      }, "json");
    };
    if (e.keyCode == 27)
    {
      $(this).closest("form")[0].reset();
      $(this).closest(".add_reply").prev().show();
      $(this).closest(".add_reply").hide();
    }
  }));

  $("div.add_reply_link").on("click", function() {
    var $row = $(this).closest(".row");
    $row.next().show();
    $row.hide();
    $row.next().find('.reply_body').focus();
  });

</script>