Запуск модального окна Bootstrap в частичном файле с Javascript?

У меня есть базовый Модальное окно Bootstrap, содержащий форму, который мне нужно отображать на моей домашней странице, когда я нажимаю кнопку «Новое сообщение».

Post модель:

class Post < ApplicationRecord
  belongs_to :user

  validates :content, length: { in: 1..400 }
end

Кнопка в home.html.erb, которая должна отображать _modal.html.erb

<!-- Modal button -->
<button type = "button" class = "btn btn-primary" data-bs-toggle = "modal" data-bs-target = "#tweetModal">
  New Tweet
</button>

_modal.html.erb

<!-- Tweet Modal -->
<div class = "modal fade" id = "tweetModal" tabindex = "-1" aria-labelledby = "tweetModalLabel" aria-hidden = "true">
  <div class = "modal-dialog">
    <div class = "modal-content">
      <div class = "modal-header">
        <h5 class = "modal-title" id = "tweetModalLabel">Send a new Tweet</h5>
        <button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close">X</button>
      </div>
      <div class = "modal-body">

        <%= simple_form_for @post, remote: true do |f| %>
          <div class = "form-inputs">
            <%= f.input :content %>
          </div>

          <div class = "form-actions">
            <%= f.submit "Submit", class: "btn btn-primary"%>
          </div>
        <% end %>


      </div>
    </div>
  </div>
</div>

Как мне заставить кнопку на моей домашней странице отображать этот частичный файл, когда я нажимаю на него с помощью Javascript?

Могу ли я сделать ошибки проверки отображения модального окна?

Вы пробовали: https://www.w3schools.com/howto/howto_html_include.asp? Он включает HTML в другой HTML. Что касается проверки, она будет отображаться в модальном режиме только в том случае, если вы не используете подлинный «требуемый» валидатор и запрограммируете свой собственный, чтобы он отображался в модальном окне.

Johnatha Relvas 03.04.2021 22:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
23
0

Другие вопросы по теме