AjaxModalRails

This plugin provides a simple way to do common modal interactions in a rails app. Keep your nice thin scaffolded controller, and just include a single mixin. Then add data attribute to links and forms to load pages via ajax in a modal.

Add this line to your application's Gemfile:

gem 'ajax_modal_rails', '~> 1.0'

And then execute:

$ bundle

Run rails generate ajax_modal_rails:install to require the necessary javascript in application.js and add a partial render to the bottom of the body in layouts/application.html.erb|haml

Add //= require ajax_modal_rails to app/assets/application.js

A page that opens a modal should call render 'ajax_modal_rails/frame' somewhere on the page. We recommend you do this in your layout so the modal frame is available for all pages.

Once everything is set up, loading to modals is pretty simple

Add the attribute data-loads-in-ajax-modal to a link and it's request will load in a modal over the current page.

Add the attribute data-submits-to-ajax-modal to a form and the response from the form's submit will load in the modal frame.

A controller that is processing actions to be loaded in a modal should include AjaxModalRails::Controller

The mixin sets the appropriate layout for modal requests and adds behavior that allows a modal request that results in a redirect to redirect the whole page.

Note that a controller that includes the AjaxModalRails::Controller module will have a few things done to it, including overriding the default implementation of redirect_to and also have it's default layout set. These modifications should be pretty innocuous as they only take effect for ajax modal requests and fall back to the default behavior otherwise, but if you encounter unexpected behavior be sure to examine the code in app/controllers/ajax_modal_rails/controller.rb You can then either copy the file into your own repository and make modifications there or just add appropriate code to your including controllers.

These snippets are taken from the included example application

app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  before_action :set_message, only: [:edit, :update, :destroy]

  include AjaxModalRails::Controller
  ...

app/views/messages/index.html.erb

<%= link_to 'New Message', new_message_path, data: {loads_in_ajax_modal: true} %>

app/views/messages/_form.html.erb

<%= form_with(model: message, data: {submits_to_ajax_modal: true}) do |form| %>

If you want to customize the behavior of this gem, run rails generate ajax_modal_rails:customize. It will copy the views, javascript, and controller mixin into your application.

The provided modal views and javascript require Twitter Bootstrap 4.0. You can do some customization if your app is using something else (see above).

The gem is available as open source under the terms of the MIT License.

This gem was made possible by a Professional Development benefit from my employer, Green River