Fuel UX Wizard change event

Question

I am working with a Fuel UX Wizard control on a page. I have been able to utilize the 'Change' function when utilizing the prev & next buttons that are part of the wizard control, as well as firing the event with a separate control on the page. The reason the 'change' event is so important is that all of the content is loaded via ajax when the user navigates to that step.

The issue I am running into involves when clicking on the steps themselves in the wizard control, the 'change' event isn't fired so the content is not loaded. My question is how can I force the 'stepclicked' event in the wizard.js class to call the 'change' event as well so that the content is loaded, preferably without changing any of the wizard.js file.

$("#MyWizard").wizard().change(function(e, data) {
        switch (data.step) {
        case 1:
            if (data.direction == "next") {
                GetExclusionLoad();
            }
            break;
        case 2:
            if (data.direction == "previous") {
                GetRevenueLoad();
            } else if (data.direction == "next") {
                GetWithholdingLoad();
            }
            break;
        case 3:
            if (data.direction == "next") {
                GetProcessBeginLoad();
            } else if (data.direction == "previous") {
                GetExclusionLoad();
            }
            break;
        case 4:
            if (data.direction == "next") {

            } else if (data.direction == "previous") {
                GetWithholdingLoad();
            }
            break;
        }
    });

SOLUTION: Thanks to to @Michael Mikowski I was able to figure it out with some small changes.

        var onChangeWizard, onClickWizard, onDirectionWizard, $myWizard,
        stateMap = {
            wizard_step_idx: 1,
            wizard_direction_str: 'next'
        };

    onChangeWizard = function(event, data) {
        var stepIdx = data.step || 1;
        var directionStr = data.direction || '';

        if (directionStr === 'next' && stepIdx < 4) {
            stepIdx++;
        } else if (directionStr === 'previous' && stepIdx > 0) {
            stepIdx--;
        }

        // save state      
        stateMap.wizard_step_idx = stepIdx;
        stateMap.wizard_direction_str = directionStr;

        switch (stepIdx) {
        case 1:
            GetRevenueLoad();
            break;
        case 2:
            GetExclusionLoad();
            break;
        case 3:
            GetWithholdingLoad();
            break;
        case 4:
            GetProcessBeginLoad();
            break;
        }
    };

    $myWizard = $('#MyWizard');

    $myWizard.on('change', function(event, data) {
        onChangeWizard(event, {
            step: data.step,
            direction: data.direction
        });
    });
    $myWizard.on('stepclick', function(event, index) {
        onChangeWizard(event, {
            step: index.step,
            direction: 'click'
        });
    });

Answer 1

If I understand correctly, you should be able to package your handler into a function, and then bind it both for change and click, like so:

var
  onChangeWizard, onClickWizard, $myWizard,
  stateMap = { 
    wizard_step_idx      : 1,
    wizard_direction_str : 'next'
  };

onChangeWizard = function ( event, data ){
  var 
    step_idx      = data.step      || 1;
    direction_str = data.direction || '';

  if ( direction_str === 'next' && step_idx < 4 ) {
    step_idx++;
  }
  else if ( direction_str === 'previous' && step_idx > 0 ){
    step_idx--;
  }

  // save state      
  stateMap.wizard_step_idx      = step_idx;
  stateMap.wizard_direction_str = direction_str;

  switch( step_idx ) {
    case 1 : loadRevenue();      break;
    case 2 : loadExclusion();    break;
    case 3 : loadWithholding();  break;
    case 4 : loadProcessBegin(); break;
  }
};

onClickWizard = function ( event ) {
  onChangeWizard( event, {
    step      : stateMap.wizard_step_idx,
    direction : stateMap.wizard_direction_str
  });
  return false;
};

$myWizard = $('#MyWizard');

$myWizard.on( click, onClickWizard );
$myWizard.wizard().change( onChangeWizard );

The above example presumes that clicking on the wizard content will continue with the direction the user previously selected. However, you might want to have it always just go forward.

The logic for the switch statement is simplified by first computing the step change and then requesting the AJAX load.