我有一個模態表單，可以很好地通過熱線創建新的詳細資訊記錄。這些欄位包括 flatpickr 日期欄位和兩個 flatpickr 時間欄位。如果我有驗證錯誤表單呈現錯誤顯示在模態內，但 flatpickr 輸入被重置回沒有 flatpickr 作為文本欄位。當顯示驗證錯誤時，如何確保它再次呈現 flatpickr 欄位？
控制器創建：
def create
@detail = Detail.new(detail_params)
@detail.user_id = current_user.id
respond_to do |format|
if @detail.save
format.html { redirect_to details_path, notice: "Detail was successfully created." }
format.json { render :show, status: :created, location: @detail }
else
format.turbo_stream
format.html { render :new, status: :unprocessable_entity }
format.json { render json: @detail.errors, status: :unprocessable_entity }
end
end
end
create.turbo_stream.erb
<%= turbo_stream.replace "new_detail", partial: "details/form", locals: { detail: @detail } %>
形式：
<%= form_with(model: detail, id: dom_id(detail)) do |form| %>
<div class="modal-header">
<h1 class="h3" id="exampleModalLabel">Post New Detail</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<% if detail.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(detail.errors.count, "error") %> prohibited this detail from being saved:</h2>
<ul>
<% detail.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<form>
<div class="mb-3">
<label class="form-label">Name</label>
<%= form.text_field :name, class: 'form-control', id: 'floatingInput1' %>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<%= form.text_field :description, class: 'form-control', id: 'floatingInput2' %>
</div>
<div class="mb-3">
<label class="form-label">Date</label>
<%= form.text_field :detail_date, class: 'form-control', id: 'floatingInput3', data: { behavior: "flatpickr" } %>
</div>
<div class="mb-3">
<label class="form-label">Start Time</label>
<%= form.text_field :start_time, class: 'form-control flatpickr1', id: 'floatingInput4', data: { behavior: "flatpickr1" } %>
</div>
<div class="mb-3">
<label class="form-label">End Time</label>
<%= form.text_field :end_time, class: 'form-control flatpickr2', id: 'floatingInput5', data: { behavior: "flatpickr2" } %>
</div>
</div>
<div class="modal-footer">
<%= form.submit class: 'btn btn-primary' %>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</form>
<script>
$( '.flatpickr1' ).flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
});
$( '.flatpickr2' ).flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
});
</script>
<% end %>
uj5u.com熱心網友回復：
我認為您的問題是您在script標簽內呼叫 flatpickr 。最好將這些呼叫移到 Stimulus 控制器（旨在與 Turbo 集成）或 Turbo 事件偵聽器內部。基本上這只是一個時間問題，并且有特定于 Turbo 的方法可以告訴頁面在正確的時間加載 JS。
Stimulus 控制器非常簡單。就像是：
new controller file, e.g. test_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
// call flatpickr here
}
}
then in form.html.erb, add the stim controller to the form element
<form data-controller="test">
...
</form>
事件偵聽器將類似于此問題中提到的內容。
document.addEventListener("turbo:before-fetch-response", function (e) {
// call flatpickr here
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/362418.html