Can not get Materialize css dropdown to work with dynamically loaded modal

Question

I have a Rails application running with MaterializeCSS. I am generally using materialize many places in the app including JS objects (like FAB buttons) and it all works fine...except for the dropdown button.

I have this one section of code where I load a modal form on the modal form I have two materializecss components which requires JS: 1) a collapsible list and 2) a dropdown. The collapsible list works fine, but the dropdown does not.

The following code makes it run (or not :-( ). I'm using coffeescript and haml:

this initializes the modal:

modalInit: () ->
  $('#photo-modal').modal
    dismissible: true
    opacity: .5
    in_duration: 300
    out_duration: 200
    starting_top: '4%'
    ending_top: '10%'
    ready: (modal, trigger) ->
      App.PhotoTaginput.refresh()
      $('.collapsible').collapsible();
      $('.dropdown-button').dropdown();

Note that the collapsible and the dropdown are initialized in the same way!!

I load the modal with this script:

showModal: (element) ->
  _this = this
  photoId = $(element).parents('.photo-widget').data("photoid")
  url = '/photos/' + photoId + '?view=modal'
  $('#photo-modal > .modal-content').load url, (result) ->
    $('#photo-modal').modal('open');

This fetches some HTML which looks like this:

.row
  .image_info#photo_id{:photo_id=>@photo.id, "data-photo_id"=>@photo.id}
    .col.l5
      .modal-toolbar
        %a.waves-effect.waves-light.btn.like{:type => "button", :class=>current_user.voted_for?(@photo) && "red"}
          %i.fa.fa-thumbs-o-up
        %a.dropdown-button.btn{"data-activates" => "dropdown1", :href => "#"} Drop Me!
        %ul#dropdown1.dropdown-content
          %li
            %a{:href => "#!"} one
          %li
            %a{:href => "#!"} two
          %li.divider
          %li
            %a{:href => "#!"} three

    .col.l12#modal_image
      %img.bg.responsive-img{:src => "#{@photo.url('org')}"}



    %ul.collapsible.overlay-menu.overlay-menu-show{"data-collapsible"=>"accordion"}
      %li
        .collapsible-header.overlay-menu-header
          %i.material-icons info
          info
        .overlay-menu-body.collapsible-body
          %table
            %tbody
              %tr
                %td Date
                %[email protected]_taken_formatted
              %tr
                %td ID
                %[email protected]
              %tr
                %td Country
                %[email protected]
              %tr
                %td Model
                %[email protected]
              %tr
                %td Make
                %[email protected]

It must have something to do with the JS which dynamically should initialize the dropdown. I say this because I can see that the css on the of the dropdown does not change when I press the button. It's kind of wierd though cause it is initialized the same way as the collapsible.

I'm pretty sure that the jquery and materialize libs are loaded correctly. I'm already using both libs in other code sections throughput the application

Answer 1

It turned out to be some HTML beef up.

I had accidentally loaded this part several times times:

    %a.dropdown-button.btn{"data-activates" => "dropdown1", :href => "#"} Drop Me!
    %ul#dropdown1.dropdown-content
      %li
        %a{:href => "#!"} one
      %li
        %a{:href => "#!"} two
      %li.divider
      %li
        %a{:href => "#!"} three

this resulted in several id's of #dropdown1 in the HTML this screwed up the initialisation of the dropdown.