PaulMarshall

I recently refactored one of my projects and decided to upgrade the Wizard Component written by Jared Hoyt to his new Wizard Plugin. Simply upgrading the component to the plugin would not have been difficult, however, I am using the Wizard in a jQuery modal box with AJAX form submission. This article is about the issues I encountered and how I fixed them.

History

When I began developing ActionTracks in 2008, I used Jared Hoyt's Wizard Component to manage the creation of Action records. The initial Wizard Component did not support plot branching so I had to modify the Wizard to support my plot branching. The Wizard ran in a modal window using an iframe.The Action creation process uses five steps with two separate branches. Each branch has 4-8 options. The branching looked like this.

action_details (Select the Trigger)

    trigger_xxx ( If the Trigger is not Immediate, Enter the Trigger Details )

select_task (Select the Task to Perform)

    task_xxx (Enter Task Detaisl)

confirm

This worked flawlessly.

Update

I have been doing a major rewrite of ActionTracks both  on the back end and front end. On the front end, I have been converting all off the Scriptaculous and dhtmlx widgets to jQuery. In addition, I have been adding more AJAX where it makes sense. In addition to my rewrite, Jared has done a major rewrite of the Wizard Component converting it to a plugin and adding plot branching.

Not only am I upgrading to the Wizard Plugin, but I am now using a jQuery UI Dialog for the modal and AJAX instead of standard forms inside an iFrame. This has been one of the most difficult and frustrating conversions.

I have managed to get it working with only a few tweaks.

I had to prefix my callbacks with an underscore.

I need to disable the defaultBranch with:

$this->defaultBranch = false

I do this because the first trigger option is Immediate, so there are no Trigger Details. This allows the Immediate option to skip to the Select Task step.

My biggest issue was dealing with Wizard Completion. Previously, there was no _afterComplete callback. Saving the data was handled in the final step callback. Everything worked for the most part with the completion code in the final step callback. As soon as I moved it to the _afterComplete, things went haywire.

There are a couple issues with saving the data.

$this->Wizard->read()

did not work in the _afterComplete callback because the data has been moved from the session key (Wizard.ControllerName) to the Wizard.complete key. I was able to retrieve it with $this->Session->read() and then save it.

Now the final issue was with redirection. As others have reported, there is a problem redirecting to $wizardAction without the controller name. I tried adding the action, but it didn't work for me. I fixed this by changing

$this->redirect($this->wizardAction)

to

$this->process() 

calling it directly instead of redirecting. This can cause a PHP Warning because you are redirecting to the process method without passing the step, so I changed

function process($step) {

to

function process($step = null) {

After all of this, it works. I need to do some thorough testing especially with backing up through steps, but so far so good.

The next step is getting the Wizard to handle editing of records. In my situation, it may be easier to delete or soft delete a record and simply create a new record. The reason is that if I edit a record there are fields with existing data that would create unpredictable results unless they were cleared.