Hotwire Modal表单未正确呈现Flatpickr
Hotwire Modal表单未正确呈现Flatpickr
提问于 2021-11-18 04:47:11
我有一个模式表单，可以很好地通过hotwire创建新的详细记录。在这些字段中有flatpickr date字段和两个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
endcreate.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 %>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-19 17:12:55
我认为您的问题是您在script标记中调用了flatpickr。最好是将这些调用移动到刺激控制器(旨在与Turbo集成)中，或者移到Turbo事件侦听器中。基本上，这只是一个时间问题，有一些特定于Turbo的方法可以告诉页面在正确的时间加载JS。
刺激控制器将非常简单。类似于：
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>事件侦听器将类似于前面提到的in this question。
document.addEventListener("turbo:before-fetch-response", function (e) {
// call flatpickr here
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70014699
复制相关文章
相似问题
腾讯云开发者
