Hi,

As shown in the docs here https://preview.keenthemes.com/html/metronic/docs/base/forms/checks-radios#radio you can use the disabled attribute for the radio input.

<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="radio" value="" disabled id="flexRadioDisabled"/>
    <label class="form-check-label" for="flexRadioDisabled">
        Disabled radio
    </label>
</div>

Regards, Sean

doen’t seem to be workng for the large advanced radios found in yur docs here: https://preview.keenthemes.com/html/metronic/docs/base/forms/advanced

I am trying to do this for the radios in the multi-step registration you have. If a corporate account is selected in step 1, the team size in step 2 of 1-1 should be greyed out and if individual is selected the options should all be greyed out with 1-1 select and otherwise unchoosable.

how can I grey out the step2 team sizes in the multistep registration based on what is selected in step 1 personal or corp account?

Hi,

You can refer to https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/vue integration guide and apply it for Svelte.

Regards, Sean

I have just renewed my support to facilitate a faster response hopefully, otherwise i’ll have to use another option and ask them to refund this one. I will also file a separate support request but basically all multi-stage items that use a stepper break because rails and most frameworks will add a hidden CSRF token in a hidden <input> tag that looks like this <input type=”hidden” name=”authenticity_token” value=”LilF6KgbBR7MBSruMcWFKyMOz_pnmcGzmiyxAm2aVDIvurHbA_uxcOqVNfB4NZbKPc7KzDoD8MGWpJAh7ErcDQ” autocomplete=”off” /> this alone is enough to destroy every js stepper in your entire package and while I respect that one can fix the js, the entire point of buying this is to not have to so that I can focus on building an app. I am willing to share a rails gem that will help you get more customers because as it stands not there really is no way to use a modern framework without dealing with CSRF insertions.

Hi,

Noted, we have got your request and let us check it and we will get back to you asap.

Regards, Sean

Hi epipheus

hidden inputs like CSRF tokens are treated as part of the validation or submission process, the stepper logic may break.

To make the KTStepper works correctly with Rails forms containing CSRF tokens, you can exclude hidden inputs from the logic.

In the JS file /starterkit/_keenthemes/src/js/components/stepper.js

Try update the _refreshUI method to ignore hidden inputs:

var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]')
    .filter(function(element) {
        return element.type !== 'hidden';
    });

Then please rebuild the assets using gulp or webpack in /starterkit/_keenthemes/tools

This change will make hidden inputs, such as CSRF tokens, are ignored during the stepper’s logic. Let me know if this helps!

First off thank you for the fast response; GREATLY appreciated. i’m using 8.2.9 demo 1 at the moment because the latest version doesn’t have all of the options 8.2.9 has. So Ive been moving over the html version manually instead of the starterkit. Will this fix 8.2.9 demo1? I don’t see a stepper.js. but I assume it must be in scripts.bundle—I will give a try later tonight.

I can confirm that did not work.

the refreshUI is in the scripts.bundle.js and I changed it to look like this: ``` var _refreshUI = function() { var state = ’’; ```

if ( _isLastStep() ) {
        state = 'last';
    } else if ( _isFirstStep() ) {
        state = 'first';
    } else {
        state = 'between';
    }
}

// Set state class
KTUtil.removeClass(the.element, 'last');
KTUtil.removeClass(the.element, 'first');
KTUtil.removeClass(the.element, 'between');

KTUtil.addClass(the.element, state);

// Step Items
// original
// var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]');

var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]')
    .filter(function(element) {
        return element.type !== 'hidden';
    });

if ( elements && elements.length > 0 ) {
    for (var i = 0, len = elements.length; i < len; i++) {
        var element = elements[i];
        var index = KTUtil.index(element) + 1;
}

KTUtil.removeClass(element, 'current');
    KTUtil.removeClass(element, 'completed');
    KTUtil.removeClass(element, 'pending');
}

if ( index  the.currentStepIndex ) {
    KTUtil.addClass(element, 'current');
} else {
    if ( index < the.currentStepIndex ) {
        KTUtil.addClass(element, 'completed');
    } else {
        KTUtil.addClass(element, 'pending');
    }
}

if ( the.options.animation ! false && element.getAttribute('data-kt-stepper-element')  'content' ) {
    KTUtil.css(element, 'animationDuration', the.options.animationSpeed);
}

var animation = _getStepDirection(the.passedStepIndex) = 'previous' ?  the.options.animationPreviousClass : the.options.animationNextClass;
KTUtil.animateClass(element, animation);

That didn’t work. Made the below changes to refresh ui in scriptbundle

var _refreshUI = function() {
    var state = '';
}

if ( _isLastStep() ) {
    state = 'last';
} else if ( _isFirstStep() ) {
    state = 'first';
} else {
    state = 'between';
}

// Set state class
KTUtil.removeClass(the.element, 'last');
KTUtil.removeClass(the.element, 'first');
KTUtil.removeClass(the.element, 'between');

KTUtil.addClass(the.element, state);

// Step Items
// original
// var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]');

var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]')
    .filter(function(element) {
        return element.type !== 'hidden';
    });

if ( elements && elements.length > 0 ) {
    for (var i = 0, len = elements.length; i < len; i++) {
        var element = elements[i];
        var index = KTUtil.index(element) + 1;
}

KTUtil.removeClass(element, 'current');
    KTUtil.removeClass(element, 'completed');
    KTUtil.removeClass(element, 'pending');
}

if ( index  the.currentStepIndex ) {
    KTUtil.addClass(element, 'current');
} else {
    if ( index < the.currentStepIndex ) {
        KTUtil.addClass(element, 'completed');
    } else {
        KTUtil.addClass(element, 'pending');
    }
}

if ( the.options.animation ! false && element.getAttribute('data-kt-stepper-element')  'content' ) {
    KTUtil.css(element, 'animationDuration', the.options.animationSpeed);
}

var animation = _getStepDirection(the.passedStepIndex) = 'previous' ?  the.options.animationPreviousClass : the.options.animationNextClass;
KTUtil.animateClass(element, animation);

to reproduce copy and paste the input csrf token example I commented with a few comments ago below the opening form tag for the multistep login form still messes it up so it doesn’t function. let me know if better to attach a file somehow

Hi epipheus

Here’s an alternative approach you can try.

var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]')
    .filter(function(element) {
        // Exclude hidden elements
        return element.offsetParent !== null && element.type !== 'hidden';
    });

add filter condition, only visible, non-hidden elements are processed.

The offsetParent !== null checks the element is visible on the page and not hidden via CSS.

Try applying this updated fix to your scripts.bundle.js. Let us know if the issue persists.

Thanks again for the response. This change also didn’t help. All I know is that this sample input tag break it every where but the fixes you’ve sent don’t yet solve it.

this same tag I mentioned above: <input type=”hidden” name=”authenticity_token” value=”LilF6KgbBR7MBSruMcWFKyMOz_pnmcGzmiyxAm2aVDIvurHbA_uxcOqVNfB4NZbKPc7KzDoD8MGWpJAh7ErcDQ” autocomplete=”off” />

again just trying to use the 8.2.9 demo1 interface. the only three js files used for the multistep registration are global/plugins.bundle.js, scripts.bundle.js and custom/utilities/modals/create-account.js

help is greatly appreciated this has stall dev efforts at the moment.

do you think you can try inserting that tag as the first child of the demo1 form for multistep auth and get it working? Having it working as a demo would help tremendously.

error i see is .filter is not a function is KTUtil.findAll not returning an array? whatever is happening it’s not liking filter for this

any idea when you think you can provide a fix? i have to manage our effort and decide if we have to find another interface; the purpose of buying your interface was to eliminate these kind of issues. I don’t fault you but I need to manage our limited resources and figure out when its time to cut losses

This also didn’t work

var elements = Array.from(KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]'))
    .filter(function(element) {
        // Exclude hidden elements
        return element.offsetParent !== null && element.type !== 'hidden';
    });

Hi,

Noted. Let us check this and we will get back to you shortly.

Regards, Sean

Hey guys I have pressure to pick another UI soon if there is no fix. I’d like to use this one.

Hi

The CSRF error triggered during form submission or stepper page changed?

Would you consider disable CSRF for that specific form?

<%= form_with url: some_path, method: :post, authenticity_token: false do |form| %>
 <%= form.text_field :name %>
 <%= form.submit "Submit" %>
<% end %>

Thanks

its for devise login, i’d feel weird disabling security for registration and login. that’s pretty important. we also need to be particular about onboarding. but the problem is that it breaks everything that uses the stepper. Is there no way to fix it so that it’s robust enough to not trip over something that is normal now in most frameworks? it’s literally a single input tag throwing everything off. Are you guys not going to help me with a work around that works? Crap, I even updated my support.

the problem is not a CSRF error. The problem is that it breaks the stepper it doesn’t advance, or it’s advancing but the next step doesn’t arrive. The issue is your theme is thrown off by a single tag that frankly should be there.