CODEWITHSUNDEEP
ruby-on-rails-4materialize
jabbajac
jabbajac

Reputation: 452

MaterializeCSS modal not working in rails

I'm trying to make a modal form pop up to add a new comment.

HTML Snippet

<a href="#add_ac" data-toggle="modal" class="waves-effect waves-light blue accent-2 white-text btn">Add Comment</a>

<div id="add_ac" class="modal">
  <div class="modal_content">
    <%= render '/s_comments/form' %>
  </div>
</div>

I'm trying to use the link to trigger the modal

This is in the javascript file for the model (admin.js)

  $('.modal-trigger').leanModal({
    dismissible: true
  });

According to the materialize css documentation that should work.

The following is in the headers for my application.js file

//= require jquery2
//= require jquery_ujs
//= require turbolinks
//= require materialize-sprockets
//= require_tree .

Thank you.

Upvotes: 1

Views: 3979

Answers (3)

Wil
Wil

Reputation: 41

You are initializing a modal class of "modal-trigger", 

  $('.modal-trigger').leanModal({
dismissible: true

});

but you are not calling / referencing the class in your anchor tag

<a href="#add_ac" data-toggle="modal" class="waves-effect waves-light blue accent-2 white-text btn">Add Comment</a>

so you just need to add "modal-trigger" in your anchor tag

<a href="#add_ac" data-toggle="modal" class=" modal-trigger waves-effect waves-light blue accent-2 white-text btn">Add Comment</a>

and it should work, also I don't know why you are using data-toggle.

Upvotes: 0

kingcoin
kingcoin

Reputation: 69

I know this question is really old, but I wanted to share just in case someone else was running into this problem.

If you are using TurboLinks (which is standard in Rails) then the javascript that attaches listeners to buttons needs to go in the body instead of the head of the document. TurboLinks replaces the body only so when you load a new page, the javascript doesn't get run again.

Upvotes: 3

Alessandro Santamaria
Alessandro Santamaria

Reputation: 967

You need to initialize materialize modals within your document ready function:

  $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

After this they should show up.

Still you need to make your rails form ready for the modals, I found a guide for this here: http://www.jetthoughts.com/blog/tech/2014/08/27/5-steps-to-add-remote-modals-to-your-rails-app.html

Upvotes: 3

Related Questions