AJAX Bootstrap Modals in Rails 4

Bootstrap Modals allows you to display any content in a dynamic dialog prompts with minimum required functionality.
In this post you will learn to create, read, update and delete records using AJAX Bootstrap Modals in Rails 4 app.
In order to do that, we will create a micro CRM app to manage customers.

Building the application

First off all, we create a new Rails 4 application by running the rails new command.

Next, we’ll add the Bootstrap gem to the  gemfile.

Next, we run the bundle install command.

We’ll import the Bootstrap styles in a new file: custom.scss

Finally, we’ll add the required Bootstrap Javascripts in app/assets/javascripts/application.js:

Model

Now that we’ve installed Bootstrap, we need to create our model. We will have a single model called Customer:
Customers  will have a unique id, a first name , a last name,  a phone,  an email, a street, a zip code and a city.
So let’s generate the model:

Next, we’ll add some Customers data to db/seeds.rb

Next, we run the rake db:migrate command to generate the database and then rake db:seed command to seed the data

Finally, after adding some validations and an address method, our model should look like this:

Controller

Let’s add the root route in routes.rb:

Next, we’ll add the CRUD actions to the customers controller:

Views

Now let’s create a customers index.html.erb file:

In line 5: remote: true tells Rails to use AJAX when creating a new customer, which allows the web page to send requests asynchronously to the server without leaving the page.
In line 20 and 24: we’ll use partial views to render the modal dynamic dialog and the customers rows.

Next, we’ll create a parial view for customers:

Next, we’ll add parial view for our dynamic modal dialog:

Okay, now let’s set up the forms, that is used for creating and editing our customers. We’ll create a _form.html.erb partial:

AJAX Bootstrap Modals

In the case of an Ajax request, Rails automatically calls a .js.erb file with the same name as the action. So, let’s create this files.
We’ll begin with the new action:

Now let’s do the same thing for edit.js.erb:

Next, we’ll create the create.js.erb file:

Next, we’ll add the update.js.erb file:

Finally, we’ll create the destroy.js.erb file:

To handle the validation errors we’ll add a javascript function in application.js:

The validation errors will be shown on the #error_explanation div in _form.html.erb

Custom Confirmation Alert

The confirmation dialog that appears when deleting a customer is the browser’s default. To custom this dialog to use Bootstrap, we’ll add some coffeescript in customers.coffe (Solution found in Stackoverflow).

I hope that was informative for you!
Feel free to drop some comments if you have questions.
The full example code can be found at: Github

Leave a Reply

21 Comments

  1. Kiri

    Hi,

    Its very nice article.

    And your sample app wis working. But when I duplicate it for my app, delete is not working.
    Any idea??

    • Hicham

      Did you add the modification to customers.coffee file?

  2. Alex

    Excelent article, was very helpful thanks! 🙂

  3. Thank You

    Hi,
    Thanks you very much you are my hero. I’m a beginner and I try many many website but each time I fail. With you I succeed !! Thank you very very very much !

    • Hicham

      Thank you! Glad to read that you like it.

  4. Steve Murray

    This is great, thank you.

    One small thing. The delete doesn’t work when going off the article code, i tracked it down and in the customers.coffee code you have the line:

    $(html).modal()

    but this should be (its correct in the Github code):

    $(html).modal(‘show’)

    • Hicham

      Thank you! I updated the code.

  5. Noticed something pretty brutal bug-wise with the coffeescript–

    $(‘#confirmationDialog .confirm’).on ‘click’, -> $.rails.confirmed(link)

    This is a very clever use of rails conventions, but has a very frightening bug hiding behind aforementioned conventions. If you have multiple entries, then move to delete one, cancel your initial deletion, then move onto a second item to delete– this is where the bug kicks in — when you delete the second item, both the first and second item will be deleted.

    This is the solution I arrived at–

    $(‘body’).off ‘click.confirm’, ‘#confirmationDialog .confirm’
    $(‘body’).on ‘click.confirm’, ‘#confirmationDialog .confirm’, ->
    $.rails.confirmed(link)

    Otherwise, great tutorial!

    • Quick Note– I have the click events bound on body because of the specific requirements of y project. It could just as easily be replicated using your codebase as such:

      $(‘#confirmationDialog .confirm).off ‘click.confirm’
      $(‘#confirmationDialog .confirm’).on ‘click.confirm’, ->
      $.rails.confirmed(link)

      Seriously though, great tutorial. Solved a really frustrating feature I’ve been trying to build as a Jr. Dev =)

      • Hicham

        Thanks for the nice words and for your bug fix! I’ll update the code as soon as possible.

  6. Thanks for sharing awesome tutorial. Could you explain how dealing with ajax pagination for index page?

    • Hicham

      Thanks for your comment.
      I’ll write a blog post explaining that soon. Stay tuned 🙂

  7. I’m getting the error on page load
    please help
    ” Uncaught TypeError: Cannot set property ‘allowAction’ of undefined ”
    in customers.coffee file

    • Hicham

      Hi Anujeet!
      Have you copied the example file from github?

  8. Ibrahim

    Dear Hicham,

    I am struggling to figure this out, and I don’t know why it’s not working, I have checked the code hundred times, and I have also checked every possible online page to help me fix this out.

    The modal doesn’t load, but instead it links me to the “new” or “edit” page.

    For example instead of showing the modal it changed to the links “…customers/new” or …/customers/54/edit”, I don’t want to leave the URL, I just want the modal to pop up.

    Please help if you can.
    Kindly,
    I.T.

  9. Tall Paul

    Hmmm maybe I am doing something wrong but the didn’t work for me, I updated it so that it iterates over each customer. Is there a rails thing that I don’t know?

    Also I noticed on update and create I needed to replace render @customer with render ‘customers/customers’, customer: @customer. This seems similar to the above question

    Finally on github you updated your coffee file but here you needed to update the to for it to work.

    Thanks for this article it helped with understanding how rails does the remote calls more and I am excited to integrate this into other projects, by far the best AJAX rails example I have seen with modals

  10. Sinhkej

    Excelent article, was very helpful thanks! I did succeed.

  11. guru prasath

    This is an awesome guide,Thank you…!

  12. Rodolfo Medramo

    Really goooooddd tutorial. I appreciate your effort to share this. Thanks a lot.

  13. This is fantastic! Thank you very much. We need to get you a ‘beer me’ button.

Next ArticleDeploying Rails 4 App on Windows