Fuelux wizard and formvalidation.io - an ajax

Question

I am currently having some troubles getting an ajax submit work with this two plugins, does anyone know how it should be looking? Since for now it submits without the ajax part to self - the same address as execution. I got really no idea where the ajax part should be and what will trigger the formvalidation.io submit handler - since I guess it should be called from on('success.form.fv')

Formvalidation.io part

$('#orderForm').find('input[name="radioclient"]')
                .on('ifChanged', function(e) {
                 // some conditionall validation
                })
                .end()
            .formValidation({
                ... options ...
            }).on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                var $form = $(e.target),
                    fv    = $form.data('formValidation');
            console.log('called');


            });

Fuelux part

$('#orderWizard')
        // Call the wizard plugin
        .wizard()

        // Triggered when clicking the Next/Prev buttons
        .on('actionclicked.fu.wizard', function(e, data) {
            var fv         = $('#orderForm').data('formValidation'), // FormValidation instance
                step       = data.step,                              // Current step
                // The current step container
                $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');

            // Validate the container
            fv.validateContainer($container);

            var isValidStep = fv.isValidContainer($container);
            if (isValidStep === false || isValidStep === null) {
                // Do not jump to the target panel
                console.log(isValidStep);
                console.log(data);
                e.preventDefault();
            }
        })

        // Triggered when clicking the Complete button
        .on('finished.fu.wizard', function(e) {
            var fv         = $('#orderForm').data('formValidation'),
                step       = $('#orderWizard').wizard('selectedItem').step,
                $container = $('#orderForm').find('.step-pane[data-step="' + step +'"]');

            // Validate the last step container
            fv.validateContainer($container);

            var isValidStep = fv.isValidContainer($container);
            if (isValidStep === true) {
                // Uncomment the following line to submit the form using the defaultSubmit() method
                fv.defaultSubmit();
       // Use Ajax to submit form data
          // $("#loadersp").html('');
    // $.ajax({
           // type: "POST",
            // url: "",
            // data:  new FormData(this), 
            // dataType: 'json',
            // cache: false,
         // }).success(function(response) {
                // If there is error returned from server
                // if (response.result === 'error') {
                     // $("#ajax_r").html('Niepowodzenie
'+response.msg+'');
                     // $("html, body").animate({ scrollTop: 0 }, "slow");
                // } else {

                     // $("#ajax_r").html('Powodzenie
'+response+'');
                     // $("html, body").animate({ scrollTop: 0 }, "slow");
                     // $('#nowyKlient').formValidation('resetForm', true);
                     // $("#nowyKlient").trigger('reset');
                // }
                // });

            e.preventDefault();
                // For testing purpose
                // $('#thankModal').modal();
            }
        });

user_4514094 · Answer

For avoiding to change step before ajax response , it should be notice some details. First, JQuery ajax is default asynchronous and it is natural that after request to controller by ajax , the Fuel UX Wizard don't wait for ajax response and do method procedural, then for waiting to ajax response it must use ajax setting "async:false". For using Fuel UX wizard and some methods in it for example on.('change'), we notice that when moving in steps for avoiding or continuing move in steps, we must return true or false for result object that it can understand move or not. In my sample, I used a variable for return true or false after ajax method that I called "stepState". See my example it worked for me :

$('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
                if (info.step == 1) {
                    if ($('#ConfirmFirstStepInfo').is(':checked')) {
                        return true;
                    }
                    else {
                        return false;
                    }
                } else if (info.step == 2) {
                    if ($('#ConfirmSecondStepInfo').is(':checked')) {
                        var ourObject = {};

                        var stepState = null;
                        $.ajax({
                            type: 'POST',
                            data: ourObject,
                            async: false,
                            contentType: false,
                            processData: false,
                            cache: false,
                            url: '/Controller/Action',
                            success: function (response) {
                                if (response.Success == true) {

                                    stepState = true;
                                    return true;
                                }
                                else {

                                    stepState = false;
                                    return false;
                                }
                            },
                            error: function () {

                                stepState = false;
                                return false;
                            },
                            failure: function () {

                                stepState = false;
                                return false;
                            }
                        });

                        return stepState;
                    }
                    else {

                        return false;
                    }
                } else if (info.step == 3) {
                    if (!$('#validation-form').valid()) 
                    { 
                        return false; 
                    }else{
                        return true; 
                    }
                }
        }).on('finished', function (e) {
            alert('finished!');
        }).on('btn-wizard-next', function (e) {
            //return false;//prevent clicking on steps
            //e.preventDefault();//this will prevent clicking and selecting steps
        });

Fuelux wizard and formvalidation.io - an ajax

2 Answers