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}) %>');

The partial task_form.html.haml code is:

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

The code for home.html.haml is:

  - if @tasks.empty?
    %span.text-warning There are no tasks!
  - else
          %th Title
          %th Created at
          %th Completed
        - @tasks.each do |task|
              %strong= task.title
            %td.text-info= task.created_at
            %td.text-success= task.completed

And for the application.html.haml is:

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