javascriptruby-on-railsruby-on-rails-4formwizardwicked-gem

How to use the Wicked wizard gem with AJAX?


I am using the wicked to create a multistep wizard. I want to use AJAX so that i can step through the form without having to reload the page. I can't find anything online about how to do this. Has anyone done this before?


Solution

  • I'm probably a bit late but I'm just working on a project using these same features so if there's anyone else wondering the same thing hopefully this might help.

    In general, it's best to set up Wicked just like you would for a normal HTML wizard:

    app/controller/set_up_positions_controller.rb

    class SetUpPositionController < ApplicationController
    
        include Wicked::Wizard
    
        steps :appointment_settings, :lab_settings
    
        def show
            case step
            when :appointment_settings
            when :lab_settings
            end
            render_wizard
        end
    
        def update
            case step
            when :appointment_settings
                #LOGIC
            when :lab_settings
                #LOGIC
            end
            render_wizard @position
        end
    
    end
    

    From here the trick is to create both a step_name.js.erb and a _step_name.html.erb file for each step. Ie.

    app/views/set_up_positions/appointment_settings.js.erb

    $('#clinics-content').html('<%= j render "clinic_management/set_up_position/appointment_settings" %>');
    

    app/views/set_up_positions/_appointment_settings.html.erb

    <%= simple_form_for [:clinic_management, @clinic, @position], url: wizard_path, method: :put, remote: true do |f| %>
      <%= f.input :bill_authorization, collection: bill_authorization_options %>
      #etc etc
    <% end%>
    

    You'll probably want to add in some error messaging with the JS file (right now it calls the same JS and renders errors under the field names which may or may not be what you'd want in this case).

    Depending on your use case it may also be easier to use one of the JS frameworks for this type of thing(like steps.js). I didn't because I understand ruby a bit better than JS, but for others it's an option as well.