Cannot render a modal when button is clicked in Rails 4

I'm a beginner to Rails and I'm following a tutorial to build a Todo App.

When I try to click the button in the browser (in the application.html.haml code below) nothing happens. It is as if it is unresponsive. I see when I hover over the button it is supposed to direct me to localhost:3000/tasks/new.

Here's a snapshot of how the page looks as of now:

enter image description here

In the tutorial, there is a modal that is used to render the new todo task. The code for the modal is in new.js.erb in view > tasks:

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

The partial task_form.html.haml code is:

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

The code for home.html.haml is:

.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

And for the application.html.haml is:

!!!
%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

I tried looking for a solution everywhere but I couldn't find it. I thought I'd post it here for help from any good samaritans..Could you let me know why I cannot see the modal?

Thanks a lot for any help.

1 answer

  • answered 2018-10-11 23:18 jerof

    I finally got it. I forgot to install the gem 'jquery-rails' and make the necessary additions to the application.js and application.scss. Restarting the server after that resulted in a modal. Thanks!