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

[Marvin_Flock]

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

[Anudeep_Garnepudi · Accepted solution]

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

[Marvin_Flock]

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"

[Anudeep_Garnepudi]

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.

[Marvin_Flock]

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?

[Anudeep_Garnepudi]

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))

[SureshDhulipudi]

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();
});
});

[Marvin_Flock]

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?

[SureshDhulipudi]

our dropdownshowhide.js in footerlibs

[ArekOwenWolk]

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.

[Anudeep_Garnepudi]

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

[Marvin_Flock]

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.

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):

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:

[ArekOwenWolk]

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

[Anudeep_Garnepudi]

@Marvin_Flock 

I can see values being set on load.

 On Load

value at the breakpoint

I am using the same tab that you shared.

[Marvin_Flock]

Interesting, you are on 6.5?

[Anudeep_Garnepudi]

Yes

[Marvin_Flock]

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

[Anudeep_Garnepudi]

@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