如何在向导的 Rails 中使用 JavaScript 隐藏/显示后退/下一个按钮？

Question

我用这个 gem 创建了一个向导表单：https://github.com/stephenbaldwin/fuelux-rails

就进入下一步和上一步而言，一切正常。但是，在第一步隐藏“prev”按钮并在最后一步仅显示“submit”按钮的“rails 方式”是什么？这是我会在 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 中？我试图在 javascripts 下创建一个单独的 .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();
  }
});

以上代码将根据您所处的步骤显示/隐藏按钮。

第二个问题是：您是否在 application.js 中指定了//= require_tree .。如果是，请尝试将代码包含在$(document).ready(function(){..code goes here..})

更新请参阅上面的更新代码。我不确定这是否是正确的方法，但我能够让它以这种方式工作。

同时添加#btnWizardPrev { display: none; }
假设：表格中包含三个步骤。如果还有更多，则需要在 switch 语句中添加更多案例。基本上你需要在这种情况下打破 case 2: 语句。在case 2: 中，next 条件用于移除下一步按钮，因此如果有更多步骤，请将next 条件移至倒数第二步。

更新将您的提交按钮代码替换为<%= f.submit :class => 'btn btn-mini btn-primary', :id => 'wizard-submit' %>。这将简单地将 id 属性添加到您的提交按钮。您可以使用任何值作为其 id。然后通过添加这个 css #wizard-submit { dispay: none } 来隐藏提交按钮，然后在你的 javascript 文件中使用上面更新的 jquery 代码。

Answer 2

向导插件已经在第一步禁用了上一个按钮。它在向导容器中查找button.btn-prev

<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;
}