Блог

Я работаю над проектом Rails 5 и использую драгоценный камень flatPickr для создания календаря. Календарь работает нормально и позволяет мне выполнять поиск по дате без проблем. Я думал, что все было хорошо. Однако я заметил, что когда я покидал свою домашнюю страницу, где я использую flatPickr, и возвращался к ней, календарь больше не появлялся. Я проверил страницу и даже вижу, что CSS-класса flatPickr больше нет в форме. Как будто приложение просто забыло о flatPicker. Вот мой код:

application.js:

 //= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require flatpickr


document.addEventListener('DOMContentLoaded', function() {
  flatpickr('#datePicker', {
    enableTime: false,
    dateFormat: "Y-m-d",});
})

document.addEventListener('DOMContentLoaded', function() {
  flatpickr('#datePicker2');
})

  

home.html.erb:

   <%= form_with(url: "/report", method: "get", remote: true) do |f| %>

      <%= f.label(:first_date, "First Date:") %>
      <%= f.text_field(:first_date, id: 'datePicker')  %>

      <%= f.label(:last_date, "Last Date:") %>
      <%= f.text_field(:last_date, id: 'datePicker2')  %>

      
      <br>
      <p>Enter Report Type:</p>
      <%= select_tag :reportType,
        options_for_select([['po', 'po'], ['invoice', 'invoice'], ['sale', 'sale'], ['received', 'received']]) %>
      <br>

      <%= submit_tag("Show Report") %>

  <% end %>
  

Я не уверен, но интересно, связана ли моя проблема с использованием DOMContentLoaded. Как я уже сказал, работает нормально, когда я изначально загружаю / обновляю домашнюю страницу. Как только я покидаю домашнюю страницу и возвращаюсь, она не работает. Спасибо за любую помощь.

Обновление: Я попытался использовать gem DatePicker в rails и получил точно такую же проблему. Я также изменил свои вызовы jquery следующим образом:

 $(document).ready(function(){
  $("#datePicker").focus(function(){
    flatpickr('#datePicker');
  });
});

window.addEventListener("pageshow", function() {
  flatpickr('#datePicker2');
})
  

и все еще возникает та же проблема — когда я ухожу со страницы, календарь перестает отображаться.

Я смог ответить на свою проблему, и решение было таким:

 window.addEventListener("turbolinks:load", function() {
  flatpickr('#datePicker2');
})

  

Помогло добавление turbolinks: load.