Javascript only loads after refresh (Ruby on rails - Materialize CSS)

Question

I'm using a Ruby on Rails application in combination with Materialize CSS.

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.

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.

 $(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<curRadios.length; i++){
          if (curRadios[i].checked){
            counter++
          }
        }
        for(var i=0; i<curChecks.length; i++){
          if (curChecks[i].checked){
            var name = curChecks[i].id;
            if (name.search(/Q1/i)){
              counterQ1++
            }else {
              counterQ2 ++
            }

          }
        }

        if (counter == (1) && counterQ1 > 0 && counterQ2 > 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<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<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');
  }

Anyone have an idea what kind of solution I can try?

Answer 1

I removed the require turbolinks from application.js . I tried this before but then it didn't work. Now it did. So thanks for the person that tried to help.