Question

I’ve created a wizard form with this gem: https://github.com/stephenbaldwin/fuelux-rails

Everything is working in terms of getting to the next and previous steps. However, what’s a ‘rails way’ to hide the ‘prev’ button on first step and show only the ‘submit’ button on last step? Is this something I’d do do in 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 file:

$(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);
    });
});

Side note/question – is there a way to put this .js in my asset pipeline without storing it in application.js? I tried to create a separate .js under javascripts but it dosen’t pull in.

Answer 1

In your javascript file replace this block

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

with following block: (UPDATED)

$('#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();
  }
});

The above code will show/hide the buttons based on the step you’re in.

And for you second question: are you specifying the //= require_tree . in the application.js. If yes then try enclosing the code in $(document).ready(function(){..code goes here..})

UPDATE See the updated code above. I am not sure if this is the correct way, but I am able to get it working this way.

Also add #btnWizardPrev { display: none; }
Assumption: There are three steps in the form. If there are more you would need to add more cases in switch statement. Basically you’ll need to break the case 2: statement in that case. In case 2: the next condition is for removing the next button, so in case there are more steps, move the next condition to second last step.

UPDATE Replace your submit button code with <%= f.submit :class => 'btn btn-mini btn-primary', :id => 'wizard-submit' %>. This will simply add id attribute to your submit button. You can use any value to be its id. Then just hide the submit button by adding this css #wizard-submit { dispay: none } and then use the above updated jquery code in your javascript file.