Wiring up the Finish button

[DCJackson]

Hello,
I'm having a hard time figuring out how to wire up the finish button and make it do anything productive. Everything else is going okay. I've looked closely at this page for reference: http://www.rafaelstaib.com/category/jQuery-Steps at the onFinished event but I guess I am very confused.

I'm parsing JSON and dynamically injecting tabs based on the JSON. That is going well. But I can't figure out how to make the Finish button fire? I would like to have all the form values from the tabs saved in session and redirect to another page.

Please send advice.
Thanks!
Chris

[rstaib]

Hi Chris,

Isn't the onFinished event triggered after clicking the finish button? I'm not quite sure whether I understand your question right. Therefore please add more details for my understanding!

Rafael

[DCJackson]

Hi Rafael,
I can't tell if the onFinished event is being triggered or not. I've tried adding code like:

$("#form").steps({
onFinished: function () {
bodyTag: "fieldset"
alert("Finish button was clicked");
}
});

But the alert does not fire. I guess I am confused about what code needs to be written in order to capture the event of the Finish button being clicked. Because right now when it's clicked nothing is happening.

Thanks for your help. Chris.

[DCJackson]

Rafael, here is my code. -Chris

<script type="text/javascript">

    var wizard = $("#wizard").steps();

    var jsonObject = "[     {         \"AssetId\": \"1000\",         \"properties\": [             {                 \"ID\": \"FA\",                 \"Value\": \"FA99999\",                 \"Type\": \"TextBox\",                 \"DataType\": \"Text\"             },           {                 \"ID\": \"Territory\",                 \"Value\": \"Territory99999\",                 \"Type\": \"TextBox\",                 \"Datatype\": \"Text\"             },            {                 \"ID\": \"FranchiseType\",                 \"Value\": \"FranchiseType99999\",                 \"Type\": \"TextBox\",                 \"Datatype\": \"Text\"             },            {                 \"ID\": \"SupplierType\",                 \"Value\": \"SupplierType99999\",                 \"Type\": \"TextBox\",                 \"Datatype\": \"Text\"             },          {                 \"ID\": \"Supplier\",                 \"Value\": \"Supplier99999\",                 \"Type\": \"TextBox\",                 \"Datatype\": \"Text\"             },             {                 \"ID\": \"TransportDisposition\",                 \"Value\": \"TD99999\",                 \"Type\": \"Dropdown\",                 \"Datatype\": \"Text\"             },             {                 \"ID\": \"LTEWave\",                 \"Value\": \"LTEWave99999\",                 \"Type\": \"Dropdown\",                 \"Datatype\": \"Text\"             },          {                 \"ID\": \"PTN\",                 \"Value\": \"PTN99999\",                 \"Type\": \"TextBox\",                 \"Datatype\": \"Text\"             }                  ]     } ]";

    var parsedJson = $.parseJSON(jsonObject);

    $.each(parsedJson, function (k1, v1) {
        //alert(k1 + ' is ' + v1);
        $.each(v1, function (k2, v2) {
            //alert(k2 + ' is ' + v2);
            if (k2 == 'properties') {
                //alert("k2 is equal to properties");
                //alert("v2 length:" + v2.length);
                //alert(v2[0].ID);
                for(var i=0; i < v2.length; i++){
                    if (v2[i].Type == 'TextBox') {
                        wizard.steps("add", { title: k2, content: "<strong>Edit page for " + v2[i].ID + "</strong><p><input type=text value=" + v2[i].Value + ">" });
                    }
                    if (v2[i].Type == 'Dropdown') {
                        wizard.steps("add", { title: k2, content: "<strong>Edit page for " + v2[i].ID + "</strong><p><select><option value=" + v2[i].Value + ">" + v2[i].Value + "</option>" });
                    }
                    wizard.steps("previous");
                }                    
            }

        });
    });

 </script>

[mbroadhead]

Chris, from the source code:

/**
 * An object that represents the default settings.
 * There are two possibities to override the sub-properties.
 * Either by doing it generally (global) or on initialization.
 *
 * @static
 * @class defaults
 * @for steps
 * @example
 *   // Global approach
 *   $.steps.defaults.headerTag = "h3";
 * @example
 *   // Initialization approach
 *   $("#wizard").steps({ headerTag: "h3" });
 **/

So you can do the first approach:

/**
 * Override the Steps plugin's default onFinished method before initializing the plugin.
 * Noticed I used $.fn.steps, not $.steps like the above comment snippet tells you to do.
 * See: http://learn.jquery.com/plugins/basic-plugin-creation/
 */
$.fn.steps.defaults.onFinished = function (event, currentIndex) {
  console.log("I set this globally -- all finished");
};

// Now initialize the plugin
var wizard = $('#wizard').steps();

Or the second approach:

var wizard = $("#wizard").steps({
  onFinished: function (event, currentIndex) {
    console.log("I set this in the constructor -- all finished");
  }
});