title: How to hide/show back/next button with JavaScript in a Rails from wizard?
body: <p>I've created a wizard form with this gem: <a href="https://github.com/stephenbaldwin/fuelux-rails" rel="nofollow">https://github.com/stephenbaldwin/fuelux-rails</a></p>
  
  <p>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?</p>
  
  <p>_form.html.erb</p>
  
  <pre><code>&lt;%= form_for(@wizard) do |f| %&gt;
  
    &lt;div&gt;
      &lt;div id="MyWizard" class="wizard"&gt;
        &lt;ul class="steps"&gt;
          &lt;li data-target="#step1" class="active"&gt;&lt;span class="badge badge-info"&gt;1&lt;/span&gt;Step 1&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li data-target="#step2"&gt;&lt;span class="badge"&gt;2&lt;/span&gt;Step 2&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li data-target="#step3"&gt;&lt;span class="badge"&gt;3&lt;/span&gt;Step 3&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="step-content"&gt;
        &lt;div class="step-pane active" id="step1"&gt;
          &lt;div class="field"&gt;
            &lt;%= f.label :field1 %&gt;&lt;br /&gt;
            &lt;%= f.text_field :field1 %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="step-pane" id="step2"&gt;
          &lt;div class="field"&gt;
            &lt;%= f.label :field2 %&gt;&lt;br /&gt;
            &lt;%= f.text_field :field2 %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="step-pane" id="step3"&gt;
          &lt;div class="field"&gt;
            &lt;%= f.label :field3 %&gt;&lt;br /&gt;
            &lt;%= f.text_field :field3 %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;input type="button" class="btn btn-mini" id="btnWizardPrev" value="prev"&gt;
        &lt;input type="button" class="btn btn-mini" id="btnWizardNext" value="next"&gt;&lt;/br&gt;
  
        &lt;div&gt;
          &lt;%= f.submit :class =&gt; 'btn btn-mini btn-primary' %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>application.js file:</p>
  
  <pre><code>$(function() {
      $('#MyWizard').on('change', function(e, data) {
          console.log('change');
          if(data.step===3 &amp;&amp; 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);
      });
  });
  </code></pre>
  
  <p>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.</p>