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

Question

I am new to AJAX and Javascript on rails.

When the tab is clicked, the corresponding partial is rendered via AJAX

When the form is rendered on the page without AJAX, flatpickr works perfectly.

flatpickr working

But when I render it with AJAX (replacing the div link with the form), the flatpickr no longer works

flatpickr not working

task#new

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

task#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"
    })
});

Answer 1

The issue you are experiencing is due to initialising flatpickr only on page load event , you need to initialise it also after the AJAX request finished.

Try adding this to your flatpickt.js with the following and replace with your form id in the querySelector selector:

...
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"
    })
  });
});