The show hide function does not work on click of the add button on multifield. | Community
Skip to main content
C
ChinmayiSh
Level 4
September 3, 2024
Solved

The show hide function does not work on click of the add button on multifield.

  • September 3, 2024
  • 3 replies
  • 1543 views

The show hide function does not work for the new set of fields on click on the add button , but works for the existing fields on the dialog.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by ChinmayiSh

I've implemented a check box to show/hide different fields respectively.

Source: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

 

var target = $(input).data('cqDialogShowhideTarget');
if ($(input).closest('coral-multifield-item').length) target = $(input).closest('coral-multifield-item').find(target);
var value = $(input).val();
if ($(input).is('coral-checkbox')) value = (!!input.checked).toString();

$(target).each((_, elem) => {

    var isHidden = $(elem).attr('data-showhidetargetvalue') !== value;
    $(elem).toggleClass('hide', isHidden);
    if ($(elem).parent().parent().is('coral-panel')) {
        var tabIndex = $(elem).closest('coral-panel').index();
        $(elem)
            .closest('coral-tabview')
            .find('coral-tablist>coral-tab:nth-child(' + (tabIndex + 1) + ')')
            .toggleClass('hide', isHidden);
    }
    if (!$(elem).hasClass('hide')) {
        $(elem).siblings().find('coral-select').removeAttr('required');
        $(elem).siblings().find('coral-select').removeAttr('aria-required');
    }
});

 

 

 

Thanks,

Chinmayi

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 3, 2024

Hi @chinmayish 
If you are looking for dropdown show/hide then you can check

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem6-4-multifield-with-show-hide-dropdown-changing-all-the-items/m-p/237275 

 

Otherwise please share more details.

Arun Patidar
    C
    ChinmayiShAuthor
    Level 4
    September 3, 2024

    Hi @arunpatidar ,

     

    It's not a drop down. It should get hidden on click of the add buttton of the multifield.

      C
      ChinmayiShAuthor
      Level 4
      September 4, 2024

      Hi @chinmayish 
      Here is the refactor code, the issue could be with the field selector, I would suggest to use class(granite:class property) for those text field as a better selector 

      var optinTypeIT = multifield.find('[name="./text1"]'); // Use class/id based selector
      var optinType = multifield.find('[name="./text2"]'); // Use class/id based selector

       

       

      (function (window, Granite, $) { "use strict"; // Add click event listener to the add button of the multifield inside the dialog-ready event $(document).on("foundation-contentloaded", function () { $("coral-multifield").each(function () { var multifield = $(this); multifield.find("button[coral-multifield-add]").on("click", function (event) { _newFields(event, multifield); }); }); }); /** * Function to show or hide fields based on page path conditions * @param {Object} event - The event object * @param {Object} multifield - The multifield element */ function _newFields(event, multifield) { var path = Granite.author.page.path; var optinTypeIT = multifield.find('[name="./text1"]'); // Use class/id based selector var optinType = multifield.find('[name="./text2"]'); // Use class/id based selector // Show or hide fields based on conditions if (path.indexOf("it") !== -1) { optinTypeIT.closest(".coral-Form-fieldwrapper").hide(); optinType.closest(".coral-Form-fieldwrapper").show(); } else { optinType.closest(".coral-Form-fieldwrapper").hide(); optinTypeIT.closest(".coral-Form-fieldwrapper").show(); } } }(window, Granite, Granite.$));

       


      Thank you for the reply @arunpatidar .

      It's not able to find the fields after click of the add button, as the fields load after some time.

      The set timeout function also does not help here.

        C
        ChinmayiShAuthorAccepted solution
        Level 4
        September 6, 2024

        I've implemented a check box to show/hide different fields respectively.

        Source: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

         

        var target = $(input).data('cqDialogShowhideTarget');
        if ($(input).closest('coral-multifield-item').length) target = $(input).closest('coral-multifield-item').find(target);
        var value = $(input).val();
        if ($(input).is('coral-checkbox')) value = (!!input.checked).toString();

        $(target).each((_, elem) => {

            var isHidden = $(elem).attr('data-showhidetargetvalue') !== value;
            $(elem).toggleClass('hide', isHidden);
            if ($(elem).parent().parent().is('coral-panel')) {
                var tabIndex = $(elem).closest('coral-panel').index();
                $(elem)
                    .closest('coral-tabview')
                    .find('coral-tablist>coral-tab:nth-child(' + (tabIndex + 1) + ')')
                    .toggleClass('hide', isHidden);
            }
            if (!$(elem).hasClass('hide')) {
                $(elem).siblings().find('coral-select').removeAttr('required');
                $(elem).siblings().find('coral-select').removeAttr('aria-required');
            }
        });

         

         

         

        Thanks,

        Chinmayi

          Terms & ConditionsAccessibility statement

          Loading footer...