Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM 6.4: Is the coral-ui event foundation-contentloaded broken?

Avatar

Level 2

Hi!
I would like to know, if the foundation-contentloaded event is triggering before the content finished loading?

Situation:
We are using the dropdownshowhide.js to conditionally show Fields based on a Dropdown Value.

This works in a normal dialog, but for some reasons not within page properties.


I wrote a basic example and tested it on a bare AEM 6.4 Instance.
If you debug through the dropdownshowhide.js, you will find, that the script is executing even before the value of the dropdown inputfield is being loaded.

Any known issue there? Maybe a workaround?

Basic example in Github repo 

Thanks for any help.
Marvin

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Marvin_Flock 

Here is the thing, form the loads for component dialog(form.cq-dialog) is different and page properties dialog is different(form.cq-siteadmin-admin-properties). Component dialog listeners may not work here. Use jquery events for Page Properties, that should work. 

To resolve the error that you are seeing in console, you should change the way you are getting the coral2 dropdown(select) value.

Try Below code:

(function ($, $document) {
"use strict";
    $( window ).on("load", function() {
        let selectValue = $("[name='./dropDwonName']").data("select").getValue();
        if (selectValue === "something") {
             //show
        } esle {
            //hide
        }
    });
})($, $(document));

Hope this works!

AG

View solution in original post

17 Replies

Avatar

Correct answer by
Community Advisor

Hi @Marvin_Flock 

Here is the thing, form the loads for component dialog(form.cq-dialog) is different and page properties dialog is different(form.cq-siteadmin-admin-properties). Component dialog listeners may not work here. Use jquery events for Page Properties, that should work. 

To resolve the error that you are seeing in console, you should change the way you are getting the coral2 dropdown(select) value.

Try Below code:

(function ($, $document) {
"use strict";
    $( window ).on("load", function() {
        let selectValue = $("[name='./dropDwonName']").data("select").getValue();
        if (selectValue === "something") {
             //show
        } esle {
            //hide
        }
    });
})($, $(document));

Hope this works!

AG

Avatar

Level 2

Could work like @SureshDhulipudi solution. But the error would remain, because the dropdownshowhide.js will be loaded anyways. Why is dropdownshowhide.js being loaded in the first place, if it is not working for the page properties? The js file is added to clientlibs because of category "cq.authoring.dialog"

Avatar

Community Advisor
Your dropdownshowhide.js included under which category client lib? If you are using OOTB clientlib category, it will load all the time on page even if you don't want.

Avatar

Level 2
Yeah, and that makes it a bug in my opinion. I dont even have the chance to get rid of it, without killing the OOTB stuff, correct?

Avatar

Community Advisor
Try replacing foundation-contentloaded event with window load event. We are using it and working since 6.3 (now we are using 6.5.4))

Avatar

Community Advisor

I am using like this in 6.5 and working fine for me

 

/*==events==*/
$(document).on("foundation-contentloaded",function(){

$(document).on("change", callTypeCls, function () {
hideShowCtaBtn();
});

$(document).on("dialog-ready", function () {
hideShowCtaBtn();
});
});

Avatar

Level 2
But that would mean touching the dropdownshowhide.js in the first place, right? because dropdownshowhide.js should not be loaded, it will result in the same error if not being overwritten, doesn't it?

Avatar

Level 1

Hi Marvin,

 

I've just faced exactly the same issue in Page Properties in AEM 6.5. 

Personally, I consider it a bug in the AEMs JS code and I'm also looking for a fix/solution that won't override the default JS library.

 

Avatar

Community Advisor

Hi @Marvin_Flock , @ArekOwenWolk 

It is working as expected both in component dialog and page properties in 6.5.4. @Marvin_Flock I saw you are using coral3 select widget in dialog, but the error that you are getting is related to coral2 widget code in dropdownshowhide.js.

if (typeof component.value !== "undefined") { //Coral3 block
    value = component.value;
} else if (typeof component.getValue === "function") { //Coral2 block
    value = component.getValue();
}

dropdown.value is undefined which is causing the issue. Try setting property selected (Boolean) true to one of the options. 

AG

Avatar

Level 2

Hey @Anudeep_Garnepudi,
thanks for your answers.

If you debug through the dropdownshowhide.js, regardless of coralui2 or coralui3, you will find that the input value is not being set, when reaching the "if" clause.

dropdownshowhide.jpg

 

 

 

 

 

 

 

 

 

 

At this point, if you have a look at component, you will see, that the input value is not set yet, resulting in a wrong execution of code (line 58 instead of line 56):
console.jpg

 

 

 

 

input with name "./linkType" is not set at js execution time.
If looking at the html after page load is complete, the value is there:
html.jpg

 

 

 

 

 

 

Avatar

Level 1

I'm facing exactly the same issue on AEM 6.5.0, using Colar3 libs

Avatar

Community Advisor

@Marvin_Flock 

I can see values being set on load.

 On LoadOn Load

value at the breakpointvalue at the breakpoint

I am using the same tab that you shared.

Avatar

Level 2

Okay, I am testing on 6.4. Do you know of any major changes regarding this?

Avatar

Community Advisor

@Marvin_Flock 

Only difference is condition checks(in dropdownshowhide.js) inside showHide(..) function.

Old condition:

if (component.value) {

    value = component.value;
} else {
    value = component.getValue();
}

New condition:

if (typeof component.value !== "undefined") {
    value = component.value;
} else if (typeof component.getValue === "function") {
    value = component.getValue();
}

Try once updating.

AG