Button handling

[azatoth]

Change the button handling to allow for external buttons, and use jquery-ui buttons instead of plain old buttons

I assume you don't want this, but we had to do is because in an popup (dialog), we really want to use the same buttons for everything, and we use ui-buttons instead of plain old buttons.

[thecodemine]

Thank you for sharing back the code.

I'm glad that you were able to modify the code to suite your needs. However, it is also possible to achieve the same thing with the vanilla formwizard plugin (not always very obvious though) using the code below. when using the code below no plain old buttons are used in the form.

<script type="text/javascript">
        $(function(){
            var wizard = $("#demoForm"); // cache the form selector

            // normal wizard initialization code
            wizard.formwizard({ 
                formPluginEnabled: true,
                validationEnabled: true,
                focusFirstInput : true,
                formOptions :{
                    resetForm: true
                }
             }
            );

            // Use dialog buttons instead of buttons inside the form
            // prerequisite: remove any navigational buttons from the form
            var buttonsOptions = {}; // buttons for the dialog
            buttonsOptions[wizard.formwizard("option","textBack")] = function(){wizard.formwizard("back")}, // call "back" method when the Back button is clicked
            buttonsOptions[wizard.formwizard("option","textNext")] = function(){wizard.formwizard("next");}; // call "next" method when the Next button is clicked

            wizard.dialog({ // create a dialog of the form
                buttons : buttonsOptions,
                open : function(){ // when the dialog is opened
                    var buttons = $(".ui-dialog-buttonset button"); // cache the buttons
                    buttons.eq(0).button("disable"); // disable the back button (on the first step)
                    var nextButtonText = buttons.eq(1).find(".ui-button-text"); // cache the text element of the Next button

                    buttons.eq(1).click(function(){ // when Next is clicked
                        if(wizard.formwizard("option", "validationEnabled") && !wizard.validate().numberOfInvalids()){ // if statement needed if validation is enabled
                            buttons.button("disable"); // disable the buttons to prevent double click
                        }
                    });

                    buttons.eq(0).click(function(){ // when Back is clicked
                        buttons.button("disable"); // disable the buttons to prevent double click
                    })

                    wizard.bind("step_shown", function(e,data){ // when a step is shown..
                        buttons.button("enable"); // enable the dialog buttons

                        if(data.isLastStep){ // if last step
                            return nextButtonText.html(wizard.formwizard("option","textSubmit")); // change text of the button to 'Submit' and return
                        }else if(data.isFirstStep){ // if first step
                            buttons.eq(0).button("disable"); // disable the Back button
                        }
                        nextButtonText.html(wizard.formwizard("option","textNext")); // set the text of the Next button to 'Next'
                    });
                }
            });
    });
</script>

Maybe this code can benefit you in some way?

Br,

Jan

[azatoth]

thanks for the code, though I think I stick with my solution as it's cleaner, and no need to reimplement all logic on each invocation. Even though I assume you don't want to add the ui button code, I think it's a good idea to add the possibility to use external elements for next/back directly.

[thecodemine]

yes, very understandable. I willl at least consider it for a later release.

Thanks again for the feedback.