jQuery DOM操作和事件触发器

Question

I am attempting to build a simple edit-in-place feature for a new rails app. To do this I need my changes to save the data.

How do I take the div info from the top and enter it in my hidden form :content to save my edit-in-place changes?

My current show.html page is as follows

<p id="notice"><%= notice %></p>

<div id="body_editable" class="editable">
  <%= @article.content %>
</div>

<%= form_for(@article) do |f| %>
  <%= f.label :content %><br>
  <%= f.hidden_field :content %>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<script>
  var editor = new MediumEditor('.editable');
</script>

I am assuming like the following are needed:

//on page load to bring the data to the div
$('#body_editable').html($('#article_content').val());

//on save to take the div and put it in the form for :content
$('#article_content').val(editor.serialize().body_editable.value);

but I am not sure how to trigger the save event using a rails submit button

Answer 1

try:

 $('select your submit').click(function(e){
     e.preventDefault();
     $('#article_content').val(editor.serialize().body_editable.value);
     $(this).closest('form').submit();
 });

Answer 2

While Alex's answer will work, it's safer to do:

$('form[for=article]').submit(function(e){
  e.preventDefault();
  $('hidden-field').val($('#body_editable').text());
  $(this).submit();
});

This way it gets the specific elements and avoids memory leaks by using functions that return the value rather than getting the native value, which allocates a new address in memory when you set things to someElement.value .

Answer 3

Capture the form's submit event, copy the value over, then submit().

Something like this:

$('form[id^="edit_article"]').on('submit', function(e) {
  e.preventDefault();
  $('#article_content').val(editor.serialize().body_editable.value);
  $(this).submit()
  return false;
});