Модальные не высовываются из Page при использовании Simple Form и Rails 5 - PullRequest
0 голосов
/ 12 октября 2018

Я создаю приложение ToDo, используя учебник в Интернете.Я достиг точки, где есть модал для новых задач todo.У меня есть модал для работы, но он не выглядит как модал.

Вот как это выглядит сейчас

What it looks like

И воткак это должно выглядеть

Should look like this

Мой код выглядит следующим образом: new.js.erb находится в views> tasks

m = $('#modal');
m.html('<%= j(render partial: 'task_form', locals: {task: @task}) %>');
m.modal('show');

_task_form.html.haml находится в views> tasks

.modal-header
  %h1 New Task
= simple_form_for task, class: 'clearfix' do |f|
  .modal-body
    = f.input :title
    = f.input :note
    = f.input :completed
  .modal-footer
    = f.submit 'Save', class: 'btn btn-primary'

My Gemfile выглядит следующим образом:

ruby '2.5.1'
gem 'rails', '~> 5.2.1'
gem 'sqlite3'
gem 'puma', '~> 3.11'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'haml'
gem "haml-rails"
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'sass-rails', '>= 3.2'
gem 'simple_form', '~> 4.0', '>= 4.0.1'
gem 'jquery-rails'
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Может кто-нибудь указать, почему я несмог увидеть модал как хочу?Это из-за простой формы или из-за чего-то другого?

Спасибо за вашу помощь!

PS Просто хочу сообщить, что я новичок и что я впервые работаю с haml и JQuery.в рельсах.

1 Ответ

0 голосов
/ 12 октября 2018

В вашем модале отсутствуют классы .modal, .modal-dialog и .modal-content, которые, как мне кажется, являются причиной вашей проблемы.Попробуйте добавить их в ваш модальный

#modal.modal.fade{role: 'dialog', 'aria-labelledby': 'myModalLabel', 'aria-hidden': true}
  .modal-dialog{role: 'document'}
    .modal-content
      .modal-header
        %h1 New Task
      = simple_form_for task, class: 'clearfix' do |f|
        .modal-body
          = f.input :title
          = f.input :note
          = f.input :completed
        .modal-footer
          = f.submit 'Save', class: 'btn btn-primary'
...