LaunchSchool - An Online School for Developers /

Blog

Integrating Rails and Bootstrap, Part 3 - Javascript Based Features

This is part 3 of a 3-part tutorial series.

This portion of this tutorial series will introduce you to some of the Javascript-based features that Bootstrap offers. In order to follow along with this tutorial, you will need an application that has Bootstrap integrated. If you do not have that yet, please check out part one of this tutorial series to Set up Bootstrap with Rails

Overview

Some of the Javascript features provided by Bootstrap extend the functionality of provided CSS features. Most of them however, introduce entirely new features into our app.

Modals

Modals are “pop-ups” that are contained within your rendered page, and do not require opening another browser window or tab. You can read more about them and see code examples here.

For our application, we are going to use modals to display the todo notes. We need to make our changes in app/views/todos/index.html.erb. Instead of displaying the notes in the table, we will display a link which will activate a modal. If the todo has no notes, there will be no link.

We need to change:

1
<td><%= todo.notes %></td>

to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<% if todo.notes? %>
  <!-- Button trigger modal -->
  <button class="btn btn-link" data-toggle="modal" data-target="#todo-<%= todo.id %>-notes">
    View notes
  </button>

  <!-- Modal -->
  <div class="modal fade" id="todo-<%= todo.id %>-notes" tabindex="-1" role="dialog" aria-labelledby="todo-<%= todo.id %>-label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="todo-<%= todo.id %>-label">Notes</h4>
        </div>
        <div class="modal-body">
          <%= todo.notes %>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
<% end %>

When you refresh your browser, you will see that you now have “View notes” links, when appropriate.

Dropdowns

Now we are going to add a dropdown menu to our navbar. Dropdowns can also be used as standalone buttons, using nav-pills. Read more about that here.

We need to add the dropdown to our app/views/shared/_navigation.html.erb file. This is the code we will be adding:

1
2
3
4
5
6
7
8
9
10
<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Login</a></li>
      <li class="divider"></li>
      <li><%= link_to 'Create a todo', new_todo_path %></li>
    </ul>
  </li>
</ul>

Our new file looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- app/views/shared/_navigation.html.erb -->

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Tealeaf Todo</a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Login</a></li>
          <li class="divider"></li>
          <li><%= link_to 'Create a todo', new_todo_path %></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Tooltips

Tooltips are nice alternatives to the standard title attribute that you can apply to HTML elements. You can read about them here.

We will use tooltips to display the creation and modification dates of our todos.

Our changes will once again happen in app/views/todos/index.html.erb. We need to change:

1
<td><%= todo.title %></td>

to:

1
2
3
4
5
<td>
  <span class="has-tooltip" data-toggle="tooltip" title="<%= "Created on #{todo.created_at.strftime("%m/%e/%Y at %w:%M %p")}, Last modified on #{todo.updated_at.strftime("%m/%e/%Y at %w:%M %p")}" %>">
    <%= todo.title %>
  </span>
</td>

If you refresh the browser now, you can place your mouse on one of the todo titles and you will see the creation and modification dates and times. We are close, but you are seeing the browser displaying the element’s title tag’s contents.

Bootstrap tooltips are not automatically enabled. We just need to add a bit of Javascript to enable them. At the end of app/assets/javascripts/application.js we need to add this code:

1
2
3
$(document).ready(function() {
  $('.has-tooltip').tooltip();
});

Now refresh the page and you will have working tooltips!

Popovers

Before I wrap it up, I want to introduce you to one more Bootstrap component. That component is the popover. Popovers are very similar to tooltips, except they are intended to display more than a few words. You can also provide them full html templates. You can read more about them here.

For the sake of an example, we are going to add a second way that users can view their todo notes.

You currently have a table cell which contains the link to show the notes. We are going to add some code to the end of that cell, just before the </td> tag. This is the code we are going to add:

1
2
3
<% if todo.notes? %>
  <button type="button" class="btn btn-link has-popover" data-toggle="popover" title="Notes" data-content="<%= todo.notes %>">View notes (popover)</button>
<% end %>

The last thing we need to do is add some Javascript to display the popover:

1
2
3
4
5
6
$(document).ready(function() {
  $('.has-tooltip').tooltip();
  $('.has-popover').popover({
    trigger: 'hover'
  });
});

We are using the hover trigger, you can read more about the options that you can provide to the popover method here.

If you refresh your browser, and hover your mouse over any of the “View notes (popover)” links, you will see that you now have nice popovers!

End of the road

We hope you have enjoyed this tutorial series! There are lots more features in Bootstrap, you can check out more on their site.