时间戳

首页 > 解决方案 > 通过 AJAX 呈现表单时，Javascript 不起作用

javascript - 通过 AJAX 呈现表单时，Javascript 不起作用

问题描述

我是 AJAX 和 Javascript on rails 的新手。

单击选项卡时，通过 AJAX 呈现相应的部分

当表单在没有 AJAX 的页面上呈现时，flatpickr 可以完美运行。

flatpickr 工作

但是当我用 AJAX 渲染它（用表单替换 div 链接）时，flatpickr 不再工作

flatpickr 不工作

任务#新

<div id="single_event">
  <%= link_to "Single_event", task_new_path, remote: true %>
</div>

任务#new.js.erb

$('#single_event a').parent().html("<%= j render 'single_event_form', meeting: @meeting %>")

single_event_form.html.erb

<div class="container">
  <%= form_with(model: meeting, local: true, :html => {:id => "flatpickr-form-single"} ) do |form| %>
    <div class="mb-6">
      <%= form.label :body %>
      <%= form.rich_text_area :body, class: 'form-control' %>
    </div>
    <div class="mb-6" style ="width: 30vw;">
      <%= form.label :start_time, class: 'label' %>
      <div class="flex items-center justify-between max-w-md">
        <%= form.text_field :start_time, data: { behavior: "flatpickr" }, placeholder: "Date and time select ...", class: "form-control" %>
      </div>
    </div>
    <div class="field" style ="width: 30vw;">
      <%= form.label :end_time, class: 'label' %>
      <div class="flex items-center justify-between max-w-md">
        <%= form.text_field :end_time, data: { behavior: "flatpickr" }, placeholder: "Date and time select ...", class: "form-control required" %>
      </div>
    </div>
    <%= form.submit class: "btn btn-primary text-base py-1.5 px-5", value: "Confirm" %>
  <% end %>
</div>

flatpickt.js

import flatpickr from "flatpickr"
require("flatpickr/dist/flatpickr.css")

document.querySelector('#flatpickr-form-single')
    .addEventListener("ajax:success", function(data, status, xhr) {
      flatpickr("[data-behavior='flatpickr']", {
        enableTime: false,
        altInput: true,
        altFormat: "F j, Y",
        minDate: "today"
    })
});

标签： javascriptruby-on-railsajax

解决方案

您遇到的问题是由于flatpickr 仅在页面加载事件上初始化，您还需要在 AJAX 请求完成后对其进行初始化。

尝试将其添加到您flatpickt.js的以下内容，并在querySelector选择器中替换为您的表单 ID：

...
document.addEventListener('turbolinks:load', function() {
  document.querySelector('#single_event a')
    .addEventListener("ajax:success", function(data, status, xhr) {
      flatpickr("[data-behavior='flatpickr']", {
        enableTime: false,
        altInput: true,
        altFormat: "F j, Y",
        minDate: "today"
    })
  });
});

推荐阅读