selectionchanged event is not working

Question

I have two felds in my dialog, one is text field(leftpadding) and another is dropdown with four options(option 1, option 2, option 3, option 4).My requirement is to display/enable the textfiled when the user selects option 3 and option 4 only. I added listeners(selectionchanged) node to the dropdown field. loadcontent event is firing but selectionchanged is not working fine. Please find below for the code snippet

selectionchanged:

function(field,value){ 

var layoutoption = "";
layoutoption = field.findParentByType('dialog').form.findField('./footerstyle').getValue();
alert('layoutoption :'+layoutoption);
if(layoutoption =='3' || layoutoption =='4'){
    field.findParentByType('dialog').form.findField('./leftPadding').enable(this);
}else {
    field.findParentByType('dialog').form.findField('./leftPadding').disable(this);
}}

Answer 1

If you look at the CQ.form.Selection API, you would find that when the selectionchanged event is fired, the following arguments would be passed to the listener.

• this : The selection field
• value : The raw value of the selected field
• isChecked : true / false, used when the selection is of type checkbox.

Thus, you could modify your listener as shown below.

function(field, value) { 
    var dlg = field.findParentByType('dialog');
    // the value holds the value of the selection
    if(value =='3' || value =='4'){
        // getField() of the dialog class returns the field with the given name
        dlg.getField('./leftPadding').show();
    }else {
        dlg.getField('./leftPadding').hide();
    }
}

The getField() method of the CQ.Dialog returns the field with the given name. In case more than one field with the same name exists, it returns an array of those fields. You can then show() or hide() the fields based on your requirements.

EDIT : CQ 5.4 somehow doesn't remove the entire widget, instead removes only the input field leaving behind the Field Label, Description etc.

In such cases the following function may be used.

function(field, value) {
    var dlg = field.findParentByType('dialog');
    if(value == '3' || value == '4') {
        dlg.getField('./leftPadding').el.parent('.x-form-item').show();
    }
    else { 
        dlg.getField('./leftPadding').el.parent('.x-form-item').hide();
    }
}