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

Question

我已经使用此gem创建了一个向导表单： https : //github.com/stephenbaldwin/fuelux-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();
  }
});

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

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

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

同时添加#btnWizardPrev { display: none; } #btnWizardPrev { display: none; }
假设 ：表格中包含三个步骤。 如果还有更多，则需要在switch语句中添加更多案例。 基本上，您需要打破案例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;
}