Displaying a Bootstrap Modal in Rails with an AJAX call

I am in the process of building a simple Learning Management Solution. I wanted to display a Bootstrap modal pop-up on click of the Add Capsules button. The idea was that on click of this button, an AJAX call should be made to the server, with the current Learning Path ID, so that it can query the DB, and find the potential capsules to be returned for the learning path. I would return an HTML snippet as response, which I wanted to insert into the body of the modal.

See screenshot below of how it looks:

Bootstrap Modal Pop up on click of Add Capsules button (with Ajax response body)

Check out this commit on Github to see the work that was needed: Bootstrap Modal Commit. The comment on the Github explains the details. It was actually quite easy once you know how.

I believe instead of sending an HTML snippet from the backend, a better practice is to send JSON data, and then construct the HTML at the browser via javascript. I guess, I could do that too, but this was really simple to do. I might modify it to return JSON some time in the recent future.

Reference:

• http://getbootstrap.com/javascript/#modals-examples
• http://stackoverflow.com/questions/20026132/using-bootstrap-3-0-modals-to-load-dynamic-remote-content-within-an-iframe