пытался следовать за проголосовавшим ответом, но у меня это не сработало. Поэтому я запланировал рабочее решение. Вот что я сделал.
1.) Сначала я добавил //= require jquery-ui в мои активы javascript
2.) Я создал форму для редактирования своих заметок. Идентификационные имена используются здесь. Также, если вы заметили, что мой URL в теге формы является пустой строкой. вы увидите на моем javascript.
<%# this is the form that is used to update the notes %>
<div id="dialog" title="Update Notes">
<%= form_tag('', method: "put", class: 'comment_form', id: 'workorder_form') do %>
<div>
<%= text_area_tag(:message, '', class: "form-control workorder_notes_text_area") %>
</div>
<div class="mt-5 text-right">
<%= submit_tag("Submit", type:"submit", class:"btn btn-primary", id: 'workorder_notes_button') %>
</div>
<% end %>
</div>
3) для каждого списка заметок я получаю идентификатор заметки и прикрепляю его к сообщению заметки
<%# id attribute is also used to get the %>
<td class="text-center" id="note_message_id_<%=note.id%>">
<%= note.message %>
</td>
4) для кнопки редактирования я использовал атрибут данных, чтобы добавить некоторые данные, такие как идентификатор заметки. также, edit-workorder имени класса используется для прослушивания события нажатия для каждой кнопки
<button data-notesid="<%= note.id%>" class="btn btn-success edit-workorder">
<span class="icon icon-pencil"></span>
</button>
ЧАСТЬ JAVASCRIPT
5) прослушивание события нажатия для каждой кнопки редактирования
$('.edit-workorder').click(function(e) {}
the next javascript are inside the click event function
6) Это захватывает данные внутри атрибута данных кнопки. см. номер 4.
const notesId = $(this).data('notesid');
7) это захватит текущее сообщение и обрежет его.
// this will return the current notes and removes spaces
const notesMsg = $(`td#note_message_id_${notesId}`)
.text()
.trim();
8) захватывает диалог.
// dialog modal
// this comes from _workordernotes.html.erb
const dialogUI = $('#dialog');
9) это будет прикреплено к form_tag, поэтому URL будет динамическим. Мне это нужно из-за идентификаторов заметок.
$('#workorder_form').attr('action',`${workorderId}/workordernotes/${notesId}`);
10) это диалоговая часть. Метод close важен, потому что когда вы впервые открываете модальное и закрываете его. URL действия не изменится, потому что состояние сохраняется. Вам необходимо уничтожить элемент или перевести его в исходное состояние (состояние пустой строки).
// dialog API
// https://api.jqueryui.com/dialog/
dialogUI.dialog({
modal: true,
draggable: false,
height: 400,
width: 600,
resizable: false,
// show: { effect: 'slideDown', duration: 1000 },
// on close dailog should return from its normal state or else
// action attribute wont change
close: function(e, ui) {
dialogUI.dialog('destroy');
}
});
11) наконец, это прикрепит текущее сообщение к текстовой области формы.
$('textarea#message').val(notesMsg);
workordernotes_controller.rb RoR
12) вот мой метод обновления. это еще не сделано. Мне просто нужно создать блок try-catch, тогда все готово. но над всем его работающим.
def update
Spree::Workordernote.find(params[:id]).update(message: params[:message])
redirect_to admin_workorder_path(params[:workorder_id])
end
ПОЛНЫЙ КОД JAVASCRIPT
$(document).ready(function() {
$('#dialog').hide();
const workorderId = $('tbody#table_body').data('workorderid');
$('.edit-workorder').click(function(e) {
e.preventDefault();
// returns the workordernotes ID
// this comes from _workordernotes.html.erb button
const notesId = $(this).data('notesid');
// this will return the current notes and removes spaces
const notesMsg = $(`td#note_message_id_${notesId}`)
.text()
.trim();
// dialog modal
// this comes from _workordernotes.html.erb
const dialogUI = $('#dialog');
// this should be called before dialog or else action attr wont attached
$('#workorder_form').attr(
'action',
`${workorderId}/workordernotes/${notesId}`
);
// dialog API
// https://api.jqueryui.com/dialog/
dialogUI.dialog({
modal: true,
draggable: false,
height: 400,
width: 600,
resizable: false,
// show: { effect: 'slideDown', duration: 1000 },
// on close dailog should return from its normal state or else
// action attribute wont change
close: function(e, ui) {
dialogUI.dialog('destroy');
}
});
// attached the old message on text area
$('textarea#message').val(notesMsg);
});
});