title: Problems showing JS Modals with Rails
body: <p>I'm trying to use modals for Rails flash messages, for the output of :notices or :errors. I just want to show them, when the page is changed, but I only can get them to work, when the document is loaded. But then it is always active.</p>
  
  <p>In the application.html.erb I use:</p>
  
  <pre><code>&lt;% flash.each do |name, msg| %&gt;
      &lt;% if msg.is_a?(String) %&gt;
          &lt;div id="modal1" class="modal"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;p&gt;&lt;%= msg %&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat"&gt;Close&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;% end %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>In my application.js file I use:</p>
  
  <pre><code>var ready;
  ready = function() {
      var modal1 = document.getElementById('#modal1');
  
      if (modal1.length &gt; 0) {
          $('#modal1').openModal();
      }
  };
  $(document).ready(ready);
  $(document).on('page:load', ready);
  </code></pre>
  
  <p>I tried checking if the string is not null too, or the length is greater zero but this won't change a thing. Only if I use:</p>
  
  <pre><code>var ready;
  ready = function() {
      $('#modal1').openModal();
  }
  $(document).ready(ready);
  $(document).on('page:load', ready);
  </code></pre>
  
  <p>it works, but then it is shown every time a page is reloaded, whether a flash msg is shown or not, and I don't want this behavior. When I change to <code>$(document).on('page:change', ready);</code> then the window stays darkened after clicking on the modal close button.</p>
  
  <p>I use materializecss for this, if that helps.</p>
  
  <p>Why do those checks not work? I tried different if statements and checks but all resulted in the modal not being showed. Any help would be appreciated.</p>
  
  <p>Kind regards.</p>
  
  <p>For those who want to know how it works. There was 1) an error in the js code and 2) I had to use a different logic for if then.</p>
  
  <pre><code>var ready;
  ready = function() {
  var modal1 = document.getElementById('modal1');
  if (modal1 !== null) {
      $('#modal1').openModal();
  }
  };
  $(document).ready(ready);
  $(document).on('page:load', ready);
  </code></pre>