Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Marvin_Flock
Level 2
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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

Marvin_Flock
Level 2
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"

Anudeep_Garnepudi
Community Advisor
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.
Marvin_Flock
Level 2
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?
Anudeep_Garnepudi
Community Advisor
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))
SureshDhulipudi
Community Advisor
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();
});
});

Marvin_Flock
Level 2
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?
ArekOwenWolk
Level 1
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.

 

Anudeep_Garnepudi
Community Advisor
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

Marvin_Flock
Level 2
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

 

 

 

 

 

 

ArekOwenWolk
Level 1
Level 1

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

Anudeep_Garnepudi
Community Advisor
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.

Marvin_Flock
Level 2
Level 2

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

Anudeep_Garnepudi
Community Advisor
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