JQuery DOM-манипуляция и триггер событий

Question

Я пытаюсь создать простую функцию редактирования на месте для нового приложения rails. Для этого мне нужны мои изменения для сохранения данных.

Как взять информацию о div сверху и ввести ее в мою скрытую форму: содержимое, чтобы сохранить изменения на месте?

Моя текущая страница show.html выглядит следующим образом

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

Я предполагаю, что, как необходимо следующее:

//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); 

, но я не знаю, как вызвать событие сохранить используя рельсы кнопка отправить

Answer 1

попробовать:

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

Answer 2

В то время как ответ Алекс будет работать, это безопаснее сделать:

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

Таким образом, он получает определенные элементы и избежать утечек памяти, используя функции, которые возвращают значение, а не получать родное значение, которое выделяет новый адрес в памяти, когда вы устанавливаете вещи на someElement.value.

Answer 3

Захватите событие отправки формы, скопируйте значение, затем отправьте().

Что-то вроде этого:

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