How to use clientlib for content fragment?

[Jitesh07]

Hi All,

I have created a content fragment that includes two data types: a checkbox and a number field. I want to add custom behavior so that the number field is only visible when the checkbox is checked. I have created a client library under /apps/clientlibs with the category dam.cfm.authoring.contenteditor.v2. Here is my JavaScript code:

Coral.commons.ready(document.querySelector('input[name="itemOrderable"]'), function(checkbox) {
var fieldToToggle = document.getElementById('coral-id-122').closest('.coral-Form-fieldwrapper');

function toggleField() {
console.log("Checkbox checked:", checkbox.checked);
if (checkbox.checked) {
fieldToToggle.style.display = 'block';
} else {
fieldToToggle.style.display = 'none';
}
}

toggleField();

checkbox.on("change", function() {
toggleField();
location.reload();
});
});

This code works, but I need to refresh the page to see the result whenever I check or uncheck the checkbox.

Thank you!

[kautuk_sahni]

@AmitVishwakarma, @Tethich, @PRATHYUSHA_VP, @Shubham_borole, @Dipti_Chauhan, @chaudharynick, @anupampat If you have a moment, please review this question and see if you can help. Thanks in advance!

[MukeshYadav_ · Accepted solution]

Hi @Jitesh07 ,
You may try below code,(addEventListener)

Coral.commons.ready(document.querySelector('input[name="itemOrderable"]'), function(checkbox) {
    var fieldToToggle = document.querySelector('#coral-id-122')?.closest('.coral-Form-fieldwrapper');

    if (!checkbox || !fieldToToggle) {
        return;
    }

    function toggleField() {
        console.log("Checkbox checked:", checkbox.checked);
        fieldToToggle.style.display = checkbox.checked ? 'block' : 'none';
    }

    toggleField();
    checkbox.addEventListener("change", toggleField);
});

Thanks

[Tethich]

Hi @Jitesh07 

If you want to refresh the entire page, as you said, can you try this snippet ?

const contentApi = $(".foundation-content").adaptTo("foundation-content");
if (contentApi) {
    contentApi.refresh();
}

Doc: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

[kautuk_sahni]

@Jitesh07 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you!