在 Rails 4 中单击按钮时无法呈现模式答案

【问题标题】：Cannot render a modal when button is clicked in Rails 4在 Rails 4 中单击按钮时无法呈现模式
【发布时间】：2018-10-11 19:20:44
【问题描述】：

我是 Rails 的初学者，我正在关注 a tutorial 来构建一个 Todo 应用程序。

当我尝试单击浏览器中的按钮（在下面的 application.html.haml 代码中）时，没有任何反应。就好像它没有反应一样。我看到当我将鼠标悬停在按钮上时，它应该将我定向到localhost:3000/tasks/new。

以下是该页面目前的外观快照：

在教程中，有一个用于渲染新 todo 任务的模式。模态的代码在new.js.erb in view > tasks:

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

部分task_form.html.haml代码为：

.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'

home.html.haml 的代码是：

.container
  - if @tasks.empty?
    %span.text-warning There are no tasks!
  - else
    %table.table.table-hover.table-bordered
      %thead
        %tr
          %th Title
          %th Created at
          %th Completed
      %tbody
        - @tasks.each do |task|
          %tr
            %td
              %strong= task.title
            %td.text-info= task.created_at
            %td.text-success= task.completed
#modal.modal.fade

对于application.html.haml 是：

!!!
%html
  %head
    %title Todo
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    .container
      .jumbotron.text-center
        %h1
          ToDo
        %p
          Welcome to the tutorial's ToDo application
        = link_to 'New task', new_task_path,  class:  'btn btn-primary', remote: true  
    = yield

我尝试到处寻找解决方案，但找不到。我想我会把它贴在这里寻求任何好心人的帮助。你能告诉我为什么我看不到模式吗？

非常感谢您的帮助。

【问题讨论】：

您是否在 rails 日志、浏览器控制台或浏览器的网络选项卡上看到任何错误消息？
@arieljuod 我检查了浏览器的网络选项卡，错误提示为Uncaught Error: Bootstrap's JavaScript requires jQuery 和Uncaught ReferenceError: $ is not defined
所以我想我明白了@arieljuod。我没有安装 gem 'jquery-rails' 并对 application.js 和 application.scss 进行必要的添加。之后重新启动服务器会导致模式。感谢您的提示！

标签： javascript ruby-on-rails

【解决方案1】：

我终于明白了。我忘记安装 gem 'jquery-rails' 并对application.js 和application.scss 进行必要的添加。之后重新启动服务器会导致模式。谢谢！

【讨论】：