0

I am creating a fuelux wizard dynamically

My code is like this:

var CutRoadArray = [
            ['Location', '_Location'],
            ['Applicant Info', '_ApplicantInfo'],
            ['Details', '_ApplicationDetails'],
            ['Bond Info', '_BondInfo'],
            ['Attachments', '_Attachments'],
            ['Review', '_ReviewA']
        ];

   function AddStepToWizard(labelname, partialviewname) {
            $("#ApplicationWizard").wizard("addSteps", 0, [
                {
                    label: labelname,
                    pane: '<div partial-view-name="' + partialviewname + '" class="dynamicTabs"></div>'
                }
            ]);
        }

This works just fine, however the array itself is dynamic and the steps may be in different orders based on selections made along the way. I want to hit a certain function when a user navigates to the pane using the "back" or "forward" button. I can tap into the 

$('#MyWizard').on('stepclick', function(e, data) {

I am thinking somehow check if the pane is equal to a value eg "location" then I will fire the function. But I am not able to get access to this text.

Any ideas will be much appreciated.

w2olves
  • 2,229
  • 10
  • 33
  • 60

1 Answers1

1

a little hacky, but this works

https://jsfiddle.net/qct3sdr1/2/

$('#myWizard').on('actionclicked.fu.wizard', function (evt, data) {
    var index = data.step;
    if(data.direction === 'next')
        index += 1;
    else
        index -= 1;
    var label = $('li[data-step="'+index+'"]').data('name');
    console.log("this is the current step label", label);
});
stackoverfloweth
  • 6,669
  • 5
  • 38
  • 69
  • brilliant! Until there is an actual function as part of the fuelux api, this is the closest I will get to the functionality. Thank you... – w2olves Aug 20 '15 at 20:41
  • I've been pretty disappointed with the options available from fuel. If you think the wizard is bad try using the tree – stackoverfloweth Aug 20 '15 at 21:06
  • I am only using their wizard component, havent tried the tree, but based on your remarks, I wont bother looking at it. I have hit a brick wall on the above posted solution, it works fine for everything until I dynamically add a new step, then the label always returns undefined. You can see my modified fiddle here: https://jsfiddle.net/w722ntay/1/ No matter what I try, label is always undefined. – w2olves Aug 21 '15 at 14:46
  • 1
    line 18 of js, you can use `.text()` instead of `.data('name')` but it will include the number as well.. Another option is to do this, https://jsfiddle.net/w722ntay/2/ – stackoverfloweth Aug 21 '15 at 15:32
  • 1
    the issue comes from the fact that when you dynamically create a step, for some reason it doesn't add the data-name="new label" to the DOM element.. another limitation of fuel I guess – stackoverfloweth Aug 21 '15 at 15:33
  • 1
    I get it now. Thank you for the response as well as the well commented fiddle. I hope this helps others as well. Thank you... – w2olves Aug 21 '15 at 16:04