title: Javascript only loads after refresh (Ruby on rails - Materialize CSS)
body: <p>I'm using a Ruby on Rails application in combination with Materialize CSS.</p>
  
  <p>The dropdown of links in the navigation works on the dashboard, but on any other page you have to refresh it first. Same for the Wave effect on buttons and tabs.
  I already tried 20 or so solutions , but they didn't work.</p>
  
  <p>I also have a javascript for a multistep form that isn't linked to Materialize CSS. It's used in a script tag on the specific page.</p>
  
  <pre><code> $(document).ready(function () {
      // get all items
      var navListItems = $('div.setup-panel div a'),
          allParts = $('.setup-content'),
          allNextBtn = $('.nextBtn'),
          allPrevBtn = $('.prevBtn');
  
      allParts.hide();
  
      navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);
        // hide when disabled
        if (!$item.hasClass('disabled')) {
          navListItems.removeClass('btn-primary').addClass('btn-default');
          $item.addClass('btn-primary');
          allParts.hide();
          $target.show();
          $target.find('input:eq(0)').focus();
        }
      });
      // previous
      allPrevBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
  
        prevStepWizard.removeAttr('disabled').trigger('click');
      });
      //next
      allNextBtn.click(function(){
        //setup next part
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStep = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text']"),
            curRadios = curStep.find("input[type='radio']"),
            curChecks =curStep.find("input[type='checkbox']"),
            isValid = true;
  
        if (curStep.hasClass('step1')){
          var txt = "";
          if (document.getElementById("snapshot_name").value == null || document.getElementById("snapshot_name").value == "") {
            txt = "You need to fill in a snapshot name";
            document.getElementById("error1").innerHTML = txt;
          }else{
            document.getElementById("error1").innerHTML = txt;
            goToNext(nextStep)
          }
        } else if (curStep.hasClass('step2')){
          var txt2 = "";
          var counter = 0;
          var counterQ1 = 0;
          var counterQ2 = 0;
          for(var i=0; i&lt;curRadios.length; i++){
            if (curRadios[i].checked){
              counter++
            }
          }
          for(var i=0; i&lt;curChecks.length; i++){
            if (curChecks[i].checked){
              var name = curChecks[i].id;
              if (name.search(/Q1/i)){
                counterQ1++
              }else {
                counterQ2 ++
              }
  
            }
          }
  
          if (counter == (1) &amp;&amp; counterQ1 &gt; 0 &amp;&amp; counterQ2 &gt; 0){
            document.getElementById("error2").innerHTML = txt2;
            goToNext(nextStep)
          } else{
            txt2 = "You need to fill in all questions"
            document.getElementById("error2").innerHTML = txt2;
          }
        }
        else if (curStep.hasClass('step3')){
          var txt3 = "";
          var counter = 0;
          var counterQ1 = 0;
          var counterQ2 = 0;
          for(var i=0; i&lt;curRadios.length; i++){
            if (curRadios[i].checked){
              counter++
            }
          }
  
          if (counter == (5) ){
            document.getElementById("error3").innerHTML = txt3;
            goToNext(nextStep)
          } else{
            txt3 = "You need to fill in all questions"
            document.getElementById("error3").innerHTML = txt3;
          }
        }
  
        else if (curStep.hasClass('step6')){
          var txt6 = "";
          var counter = 0;
          for(var i=0; i&lt;curRadios.length; i++){
            if (curRadios[i].checked){
              counter++
            }
          }
  
          if (counter == (14) ){
            document.getElementById("error6").innerHTML = txt6;
            goToNext(nextStep)
          } else{
            txt6 = "You need to fill in all questions"
            document.getElementById("error6").innerHTML = txt6;
          }
        }
        else {
          goToNext(nextStep)
        }
  
      });
  
      $('div.setup-panel div a.btn-primary').trigger('click');
    });
  
    function goToNext(nextStep){
        nextStep.removeAttr('disabled').trigger('click');
        nextStep.removeClass('disabled').trigger('click');
    }
  </code></pre>
  
  <p>Anyone have an idea what kind of solution I can try?</p>