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

Avatar

Avatar

Marvin_Flock

Avatar

Marvin_Flock

Marvin_Flock

13-11-2020

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

AEM bug coralUI

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

ArekOwenWolk

Avatar

ArekOwenWolk

ArekOwenWolk

13-11-2020

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.

 

Answers (6)

Answers (6)

Avatar

Avatar

Marvin_Flock

Avatar

Marvin_Flock

Marvin_Flock

16-11-2020

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

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

16-11-2020

@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

Avatar

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

16-11-2020

@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

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

15-11-2020

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

Avatar

sureshd71454102

Avatar

sureshd71454102

sureshd71454102

13-11-2020

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

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

13-11-2020

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