Saturday, February 1, 2014

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:

2 comments:

Technews Able said...

What is bootstrap and why should you use bootstrap?

Nitesh Kumar said...

I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in AJAX, kindly contact us http://www.maxmunus.com/contact
MaxMunus Offer World Class Virtual Instructor led training on AJAX. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us.
Nitesh Kumar
MaxMunus
E-mail: nitesh@maxmunus.com
Skype id: nitesh_maxmunus
Ph:(+91) 8553912023
http://www.maxmunus.com/