ruby​​ on rails 5でマルチステップフォームを作成するには？

Question

私はレールに複数のステップフォームを作成しようとしています。代わりに、動的フォームを作成するために宝石のような宝石を使用して、私はちょうどjqueryの遷移を使用して複数のステップフォームを作成しました。

new.html.erb

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => { :id => "msform" }) do |f| %> 
    <%= devise_error_messages! %> 
    <ul id="progressbar"> 
    <li class="active">Account Setup</li> 
    <li>Social Profiles</li> 
    <li>Personal Details</li> 
    </ul> 
    <fieldset> 
    <h2 class="fs-title">Create your account</h2> 
    <h3 class="fs-subtitle">This is step 1</h3> 
    <%= f.email_field :email, autofocus: true, placeholder: "Email" %> 
    <% if @minimum_password_length %> 
    <em>(<%= @minimum_password_length %> characters minimum)</em> 
    <% end %><br /> 
    <%= f.password_field :password, autocomplete: "off", placeholder: "Password" %> 
    <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "Confirm Password" %> 
    <%= button_tag "Next", :type => 'button', :class => "next action-button" %> 
    </fieldset> 
    <fieldset> 
    <h2 class="fs-title">Social Profiles</h2> 
    <h3 class="fs-subtitle">Your presence on the social network</h3> 
    <%= f.text_field :user_name, autocomplete: "off", placeholder: "Username" %> 
    <%= f.text_field :first_name, autocomplete: "off", placeholder: "Firstname" %> 
    <%= f.text_field :last_name, autocomplete: "off", placeholder: "Lastname" %> 
    <%= f.text_area :about, autocomplete: "off", placeholder: "Lastname" %> 
    <%= button_tag "Previous", :type => 'button', :class => "previous action-button"%> 
    <%= button_tag "Next", :type => 'button', :class => "next action-button"%> 
    </fieldset> 
    <fieldset> 
    <h2 class="fs-title">Personal Details</h2> 
    <h3 class="fs-subtitle">We will never sell it</h3> 
    <%= f.text_field :profession, autocomplete: "off", placeholder: "Your profession" %> 
    <%= f.text_field :skills, autocomplete: "off", placeholder: "Skills" %> 
    <%= f.text_field :honours, autocomplete: "off", placeholder: "Hounours" %> 
    <%= button_tag "Previous", :type => 'button', :class => "previous action-button"%> 
    <%= button_tag "Next", :type => 'button', :class => "next action-button"%> 
    <%= f.submit "Sign up", :class => "submit action-button"%> 
    </fieldset> 
<% end %>  
<%= render "devise/shared/links" %> 

私は彼がHTML、CSSとjQueryを使用codepen にAtakan Goktepeによって作成されたコードを使用しようとしています。私はちょうどそのHTMLをerbに変換し、私は上記のコードを使用して正しくレールでは動作しません。次のボタンをクリックしても何も起こりません。

application.js

var current_fs, next_fs, previous_fs; //fieldsets 
var left, opacity, scale; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 
console.log("Hello"); 
$(".next").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      left = (now * 50)+"%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({ 
     'transform': 'scale('+scale+')', 
     'position': 'absolute' 
     }); 
      next_fs.css({'left': left, 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".previous").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 


    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'left': left}); 
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".submit").click(function(){ 
    return false; 
}) 

だから私は、この問題の解決策を提供してください。 jqueryのコードが正しく動作していません。前もって感謝します！

Answer 1

ドキュメントでイベントを発生させるには、$(document).ready()を使用する必要があります。あなたはレール5上のルビーを使用して、ちょうどthisをチェックアウトturbolinksの機能にアクセスする必要がある場合 あなたapplication.js

var current_fs, next_fs, previous_fs; //fieldsets 
var left, opacity, scale; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 
console.log("Hello"); 
$(document).ready(function(){ 
$(".next").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      left = (now * 50)+"%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({ 
     'transform': 'scale('+scale+')', 
     'position': 'absolute' 
     }); 
      next_fs.css({'left': left, 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".previous").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 


    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'left': left}); 
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".submit").click(function(){ 
    return false; 
}) 

}); 

でこれを試してみてください。