如何使用JavaScript從Rails嚮導隱藏/顯示/下一個按鈕？

Question

我用這個寶石創建了一個嚮導窗體：https://github.com/stephenbaldwin/fuelux-rails

一切工作都在進行下一步和前面的步驟。但是，第一步隱藏'prev'按鈕的'rails方式'是什麼，在最後一步只顯示'submit'按鈕？這是我在js會做的事嗎？

_form.html.erb

<%= form_for(@wizard) do |f| %> 

    <div> 
    <div id="MyWizard" class="wizard"> 
     <ul class="steps"> 
     <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li> 
     <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li> 
     <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li> 
     </ul> 
    </div> 
    <div class="step-content"> 
     <div class="step-pane active" id="step1"> 
     <div class="field"> 
      <%= f.label :field1 %><br /> 
      <%= f.text_field :field1 %> 
     </div> 
     </div> 
     <div class="step-pane" id="step2"> 
     <div class="field"> 
      <%= f.label :field2 %><br /> 
      <%= f.text_field :field2 %> 
     </div> 
     </div> 
     <div class="step-pane" id="step3"> 
     <div class="field"> 
      <%= f.label :field3 %><br /> 
      <%= f.text_field :field3 %> 
     </div> 
     </div> 
     <input type="button" class="btn btn-mini" id="btnWizardPrev" value="prev"> 
     <input type="button" class="btn btn-mini" id="btnWizardNext" value="next"></br> 

     <div> 
     <%= f.submit :class => 'btn btn-mini btn-primary' %> 
     </div> 
    </div> 
    </div> 
<% end %> 

的application.js文件：

$(function() { 
    $('#MyWizard').on('change', function(e, data) { 
     console.log('change'); 
     if(data.step===3 && data.direction==='next') { 
      // return e.preventDefault(); 
     } 
    }); 
    $('#MyWizard').on('changed', function(e, data) { 
     console.log('changed'); 
    }); 
    $('#MyWizard').on('finished', function(e, data) { 
     console.log('finished'); 
    }); 
    $('#btnWizardPrev').on('click', function() { 
     $('#MyWizard').wizard('previous'); 
    }); 
    $('#btnWizardNext').on('click', function() { 
     $('#MyWizard').wizard('next','foo'); 
    }); 
    $('#btnWizardStep').on('click', function() { 
     var item = $('#MyWizard').wizard('selectedItem'); 
     console.log(item.step); 
    }); 
}); 

旁註/問題 - 有沒有把這個.js文件在我的資產管道沒有將其存儲的方式application.js中？我試圖創建JavaScript的下一個單獨的.js但是這麼想的拉

Answer 1

在你的JavaScript文件，如下塊替換該塊

$('#MyWizard').on('change', function(e, data) { 
    console.log('change'); 
    if(data.step===3 && data.direction==='next') { 
     // return e.preventDefault(); 
    } 
}); 

：（修訂版）

$('#MyWizard').on('change', function(e, data) { 
    console.log('change'); 
    $('#wizard-submit').hide(); //hide the submit button on each step. 
    if(data.step === 3 && data.direction === 'next') { 
    // return e.preventDefault(); 
    $('#wizard-submit').show(); //show the submit button only on last(3rd in your case) step. 
    } 

    switch(data.step) { 
    case 1: 
     if(data.direction === 'next') 
     $('#btnWizardPrev').show(); 
     else 
     $('#btnWizardPrev').hide(); 

     $('#btnWizardNext').show(); 
     break; 
    case 2: 
     if(data.direction === 'next') { 
     $('#btnWizardPrev').show(); 
     $('#btnWizardNext').hide(); 
     } 
     else { 
     $('#btnWizardPrev').hide(); 
     $('#btnWizardNext').show(); 
     } 
     break; 
    case 3: 
     // I would recommend to show the prev button on last step but hide the next button. 
     if(data.direction === 'next') 
     $('#btnWizardNext').hide(); 
     else 
     $('#btnWizardNext').show(); 

     $('#btnWizardPrev').show(); 
     break; 
    default: 
     $('#btnWizardPrev').show(); 
     $('#btnWizardNext').show(); 
    } 
}); 

上述代碼將根據您所在的步驟顯示/隱藏按鈕。

對於第二個問題：您是否指定了//= require_tree .在application.js。如果是，則嘗試將代碼封入$(document).ready(function(){..code goes here..})

UPDATE請參閱上面的更新代碼。我不確定這是否是正確的方式，但我能夠以這種方式實現它。

另外補充#btnWizardPrev { display: none; }
假設：有形式三個步驟。如果還有更多需要在switch語句中添加更多的案例。基本上你需要在這種情況下打破案例2：陳述。在case 2:中，next條件用於刪除下一個按鈕，因此如果還有更多步驟，請將next條件移至第二個最後一步。

UPDATE將您的提交按鈕代碼替換爲<%= f.submit :class => 'btn btn-mini btn-primary', :id => 'wizard-submit' %>。這將簡單地將id屬性添加到您的提交按鈕。你可以使用任何值作爲它的id。然後通過添加此css #wizard-submit { dispay: none }隱藏提交按鈕，然後在您的JavaScript文件中使用上面更新的jQuery代碼。

Answer 2

嚮導插件已經在第一步中禁用了上一個按鈕。它看起來對位於嚮導容器

<div id="myWizard" class="wizard"> 
    <div class="actions"> 
    <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> 
    <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button> 
    </div> 

如果你想隱藏禁用之前的按鈕，你可以用CSS的目標是要避免的JavaScript

.wizard button.btn-prev[disabled] { 
    display: none; 
}