#javascript #html #css #ruby-on-rails #tailwind-css
Вопрос:
После того, как я прочесал Интернет и переписал столько объяснений, сколько смог, я просто не получаю ожидаемого результата. Ожидаемый результат-когда Пользователь выбирает «Все встречи», он переключается с представления календаря на представление списка.
Я вижу, что в Календаре вызывается правильный маршрут (http://localhost:5000/appointments#calendar) и Все встречи (http://localhost:5000/appointments#all-appointments). Но вид из календаря не меняется.
Я пробовал различные способы вызова из файла application.html.erb и различных структур. Возможно, это что-то простое, но я не просто вижу это.
Структура папок:
Ниже приведены соответствующие фрагменты, любая помощь будет признательна!
application.html.erb
lt;!DOCTYPE htmlgt; lt;html class="h-100"gt; lt;headgt; lt;%= render 'shared/head' %gt; lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %gt; lt;%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %gt; lt;%= javascript_include_tag "https://js.stripe.com/v3/", 'data-turbolinks-track': 'reload' %gt; lt;%#= tag :meta, name: "stripe-public-key", content: Rails.application.credentials.stripe_publishable_key %gt; lt;/headgt; lt;body class="d-flex flex-column h-100"gt; lt;main class="flex-shrink-0"gt; lt;%= render 'shared/navbar' %gt; lt;%= render 'shared/notices' %gt; lt;div class="container mt-4 mx-auto"gt; lt;%= yield %gt; lt;/divgt; lt;/maingt; lt;%= render 'shared/footer' %gt; lt;/bodygt; lt;/htmlgt; _appointments_landing.html.erb
lt;nav class="bg-white mb-4 shadow rounded"gt; lt;ul id="nav-tab" class="tabs list-reset flex"gt; lt;li class="active" data-tab="calendar"gt; lt;%= link_to "#calendar", class: "tab flex items-center" do %gt; lt;svg viewBox="0 0 20 20" width="16" height="16" class="fill-current text-grey-light mr-2"gt;lt;titlegt;calendarlt;/titlegt;lt;path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"gt;lt;/pathgt;lt;/svggt; Calendar lt;% end %gt; lt;/ligt; lt;li data-tab="all-appointments"gt; lt;%= link_to "#all-appointments", class: "tab flex items-center" do %gt; lt;svg viewBox="0 0 20 20" class="fill-current text-grey-light mr-2" width="16" height="16"gt;lt;titlegt;coffeelt;/titlegt;lt;path d="M4 11H2a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h2V1h14v10a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zm0-2V5H2v4h2zm-2 8v-1h18v1l-4 2H6l-4-2z"gt;lt;/pathgt;lt;/svggt; All Appointments lt;% end %gt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;div class="bg-white p-10 border rounded"gt; lt;div id="all-appointments" class="tab-panel"gt; lt;h1gt;Appointmentslt;/h1gt; lt;% appointments.each do |appointment| %gt; lt;div class="flex flex-wrap items-center justify-start p-4 border-b border-grey-light mb-6"gt; lt;div class="flex-1 flex justify-between"gt; lt;divgt; lt;%= link_to appointment.title, appointment, class: "link mr-4" %gt; lt;/divgt; lt;divgt; lt;%= readable_time(appointment.start_time) %gt; amp;ndash; lt;%= readable_time(appointment.end_time) %gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;%= link_to "Cancel Appointment", appointment, method: :delete, data: { confirm: "Are you sure? There are no refunds." }, class: "btn btn-destroy ml-4" if admin? %gt; lt;% end %gt; lt;/divgt; lt;div id="calendar" class="tab-panel active"gt; lt;h2gt;Appointment Calendarlt;/h2gt; lt;div id="appointment-calendar"gt; lt;%= render "calendar", appointments: appointments %gt; lt;/divgt; lt;/divgt; lt;/divgt; application.js
window.Rails = require("@rails/ujs") require("@hotwired/turbo-rails") require("@rails/activestorage").start() require("channels") //require("trix") //require("@rails/actiontext") require("local-time").start() require("packs/appointments") // TailwindCSS import 'stylesheets/application' // Start Rails UJS Rails.start() // Stimulus import "controllers" document.addEventListener("turbo:load", () =gt; { var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) }) }) appointments.js
document.addEventListener("turbolinks:load", () =gt; { const tabElements = document.querySelectorAll('#nav-tab .tab'); function onTabClick(event) { const activeTabs = document.querySelectorAll('.active'); activeTabs.forEach(function(tab) { tab.classList.toggle('active'); }); event.target.parentElement.classList.add('active'); event.preventDefault(); // show and hide tab panels var tabPanel = document.getElementById(event.target.href.split("#")[1]); tabPanel.classList.toggle('active'); } if(tabElements != null) { tabElements.forEach(function(tab) { tab.addEventListener('click', (event) =gt; { onTabClick(event); }); }); } });