Hide Choice Control option programmatically

T
Badge +6

Hey guys,

I'm using a button-rendered Choice control to create a Navigation Menu, like so:

185675_pastedImage_0.png

I also used CSS to format the selected/unselected buttons using the predefined classes:

.Navigation .ui-state-default {

.Navigation .ui-state-active {

My question is, is there a way to use Javascript to programmatically hide one of the options in the Navigation Menu?

I tried using the following:

var pageToHide = 'Test Key Code Validation';

if (ActivePage.val() != pageToHide) {

    HideFromNavigation(pageToHide);

}

and the function:

function HideFromNavigation(pageName) {

    Navigation.find('input[value='' + pageName + '']').prop('visible', false).change();

}

But no matter what I do, the specific input choice is not hidden!

I can't even seem to be able to change its CSS, e.g. use .css('border', '3px solid red');

Any ideas?!

5 replies

T
Badge +6

Hey Jeff,

Already tried it, it didn't work...

The selector retrieves an HTMLInputElement, and you can't set CSS on it (which is what .hide() does)!

I'm now checking to see if I can detect and hide its parent element instead!

T
Badge +6

I had done it slightly different than you, using

NWF$('span .ui-button-text:contains(' + this.value + ')').addClass('navigation-completed');

But I like your approach better!

T
Badge +6

Jeff,

Instead of hiding the choice option, have you tried changing its CSS style/class e.g. to set a different background?

Your approach seems to change the background color BEHIND the button, whereas the "span .ui-button-text" selector works correctly!

The problem, however, is that the new CSS class that I add to it seems to override the styles for the .ui-state-active selector, even though I do not use !important...

So if I change the bg-color for the first 3 buttons (e.g. to indicate flow completion status), then click on one of them (thus triggering the .ui-state-active selector), I only see the background from the NEW class and NOT the background defined in state-active (which is set using !important)!

Any thoughts/ideas on how I could make that work?

T
Badge +6

Hey Jeff,

This has nothing to do with hiding the button, I'm talking about having e.g. 10 buttons in the Choice control, the first 3 to (programmatically) have a different background color/CSS class, but still display the .ui-state-active formatting if one of them is clicked!

This is how I add the new class programmatically:

NWF$('span .ui-button-text:contains(' + this.value + ')').addClass('navigation-completed');

.navigation-completed {

    color: white !important;

    background-color: mediumseagreen;

}

.ui-state-active {

    color: white !important;

    background-color: #E06149 !important;

}

However, the formatting specified in this new .navigation-completed class is always being used in the buttons in question, even if one of those buttons is clicked (and its state becomes ui-state-active!)

I was able to bypass this issue by using a background-url in .navigation-completed (instead of changing the bg-color), but I was curious if we could make it work with the bg-color as well!

T
Badge +6

I check each tab's status as soon as the form loads, and add the new class to the completed pages (e.g. the first 3).

However, the user is free to click on ANY of the buttons in the navigation menu, and the active/selected button should have a specific background, regardless of completion status happy.png

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings