Yesterday I spent nearly four hours learning how to create a modal window that displayed a partial with jquery. Two weeks ago, I was pretty stoked to have done this very same thing, albiet with a gem. So today I am going to teach you how to avoid an afternoon filled with swearwords muttered under your breath and how to use the gem!
First, make sure you have the jquery-modal-rails and jquery-ui-rails gems in your gemfile.
The jquery-modal-rails gem is awesome because it does the bulk of the styling work for you. In order to make it work, you will need to add:
require jquery.ui.all require jquery.modal
to both the application.css and application.js files in your assests directory. And that's basically the whole set up of the gem.
What did this look like when all this code was written without the gem?:
Here is the jquery to generate a modal window and open & close it:
And here is the css styling without the gem:
You can see why someone would want to avoid all that work if they are doing a quick project. The rails-jquery-modal gem is perfect for this scenario. Of course, if you have the time, it would be much cleaner and more customizable to write your modal from scratch. With our normal project sprint of two weeks from start to finish at Ada, we found that using this gem in our project made it much easier to get to more meaty and interesting code. Were I to have more time, I would love to redo this project's entire front-end, including removing this gem.