How to use the Wicked wizard gem with AJAX?

Question

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?

Answer 1

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.