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
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
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
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
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"
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
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();
});
});
Views
Replies
Total Likes
Views
Replies
Total Likes
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.
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
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:
I'm facing exactly the same issue on AEM 6.5.0, using Colar3 libs
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Replies
Total Likes
Okay, I am testing on 6.4. Do you know of any major changes regarding this?
Views
Replies
Total Likes
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
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies