Hello Fellow Couchers!

I've recently run into an inexplicable problem when using conditional fields and I have what seems to be working as a solution, but I'm not sure if there is something else wrong, or if I'm missing something, but I scoured the documentation and couldn't find anything that mentioned this issue.
Conditional Fields post: https://www.couchcms.com/forum/viewtopic.php?f=5&t=11512

The issue is like this. I'll have conditional controller dropdown that makes a color picker and a checkbox come alive.

Here is that code:

Code: Select all

<cms:editable type='group' name='color_overlay' label='Optional Color Overlay' order='200' >
        
    <cms:editable name='colors_row' type='row' order='205'>
        <cms:editable type='dropdown' name='img_ovrly' label='Subtle Image Overlay' desc='optional - default none'
            opt_values='None=0 |Solid=1 |Gradient=2' class='col-xs-3'  order='210'
        />


        <cms:func _into='overlay_chosen' img_ovrly=''>
            <cms:if "<cms:is '0' in=img_ovrly />">
                hide
                <cms:else />
                show
            </cms:if>
        </cms:func>
        <cms:func _into='gradient_chosen' img_ovrly=''>
            <cms:if "<cms:is '2' in=img_ovrly />">
                show
                <cms:else />
                hide
            </cms:if>
        </cms:func>
            <cms:editable type='color'
                name='clr_one'
                label='Color 1'
                desc='Solid Color or First of Gradient'
                color='#000000'
                alpha='1'
                width='50%'
                height='100px'
                class='col-xs-3'
                not_active=overlay_chosen 
                order='220'
            />
            <cms:editable type='color'
                name='clr_two'
                label='Color 2'
                desc='Second Color of Gradient - Ramp'
                color='#000000'
                alpha='1'
                width='50%'
                height='100px'
                class='col-xs-3'
                not_active=gradient_chosen 
                order='225' 
            />
            <!-- Decision to swap gradient colors -->
            <cms:editable type='checkbox' name='rvrs_grad' label='Reverse Gradient Colors' 
                opt_values='Swap=1' class='col-xs-3' not_active=gradient_chosen  order='230'
            />
        </cms:editable>
    </cms:editable>

So, when I choose 'gradient' in the dropdown, both color choices AND the checkbox to swap the colors come up.
For whatever reason, which is the problem I'm writing about, the change on the checkbox doesn't keep when saving the editable Admin page. In other words, if my checkbox started out checked (like while troubleshooting), I would uncheck it, save but the page would refresh and the checkbox had reverted back to unchecked - like it never took the change in the first place. The 2nd color that came alive would retain any and all of its changes on every save of the page.

All of my troubleshooting pointed to an issue with the not_active parameter on the checkbox. I tried all kinds of different arrangements, and finally came up with something that works, and I don't really know why:

Code: Select all

<cms:editable type='group' name='color_overlay' label='Optional Color Overlay' order='200' >
        
    <cms:editable name='colors_row' type='row' order='205'>
        <cms:editable type='dropdown' name='img_ovrly' label='Subtle Image Overlay' desc='optional - default none'
            opt_values='None=0 |Solid=1 |Gradient=2' class='col-xs-3'  order='210'
        />


        <cms:func _into='overlay_chosen' img_ovrly=''>
            <cms:if "<cms:is '0' in=img_ovrly />">
                hide
                <cms:else />
                show
            </cms:if>
        </cms:func>
        <cms:func _into='gradient_chosen' img_ovrly=''>
            <cms:if "<cms:is '2' in=img_ovrly />">
                show
                <cms:else />
                hide
            </cms:if>
        </cms:func>
        <cms:func _into='grad_swap' img_ovrly=''>
            <cms:if img_ovrly ne "2">
                hide
                <cms:else />
                show
            </cms:if>
        </cms:func>
            <cms:editable type='color'
                name='clr_one'
                label='Color 1'
                desc='Solid Color or First of Gradient'
                color='#000000'
                alpha='1'
                width='50%'
                height='100px'
                class='col-xs-3'
                not_active=overlay_chosen 
                order='220'
            />
            <cms:editable type='color'
                name='clr_two'
                label='Color 2'
                desc='Second Color of Gradient - Ramp'
                color='#000000'
                alpha='1'
                width='50%'
                height='100px'
                class='col-xs-3'
                not_active=gradient_chosen 
                order='225' 
            />
            <!-- Decision to swap gradient colors -->
            <cms:editable type='checkbox' name='rvrs_grad' label='Reverse Gradient Colors' 
                opt_values='Swap=1' class='col-xs-3' not_active=grad_swap  order='230'
            />
        </cms:editable>
    </cms:editable>

The only difference is that I created a new function and swapped the "show/hide" rules. And since there really isn't an "is" answer because I need it to hide on 2 of the choices, I created a 'not equal to' function. I used this function as the not_active value. This setup allows the checkbox to retain changes and the correct action to happen onscreen.

Up the page a bit, I have a couple other checkboxes that rely on not_active functions to show/hide, and they gave me no problems. It seems the problems only come when the function being used is shared, but I did test order and put the checkbox first, and still, the same issue was at hand.

This issue was consistent on both my local testing server and my actual webhosting server.
I hope this may help others if you run into issues with conditional fields, or may shine a light on something I may be missing.

Keep on the Couch, folks. It's a great place to be!!

[trendoman]

The tag <cms:is 'x' in=y /> should be used for arrays only (checkboxes), so, as the value of a dropdown (or radio) is a string both declared functions do not work correctly. Third 'introduced' func has correct syntax.

On another note, I think a 'no value' would be easier than '0'.

opt_values='None=- |Solid=1 |Gradient=2'

This did the trick! Thank you @trendoman!

I had that on a lot of my dropdown controllers. I've fixed them accordingly.