AEM 6.4: Is the coral-ui event foundation-contentloaded broken? | Adobe Higher Education
Skip to main content
Marvin_Flock
Marvin_Flock
Level 2
November 13, 2020
解決済み

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

  • November 13, 2020
  • 7 の返信
  • 6477 ビュー

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

    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

    7 の返信

    Anudeep_Garnepudi
    Community Advisor
    Anudeep_GarnepudiCommunity Advisor回答
    Community Advisor
    November 13, 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

      Marvin_Flock
      Marvin_Flock作成者
      Level 2
      November 13, 2020

      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"

      SureshDhulipudi
      Community Advisor
      SureshDhulipudiCommunity Advisor
      Community Advisor
      November 13, 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();
      });
      });

        Marvin_Flock
        Marvin_Flock作成者
        Level 2
        November 13, 2020
        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?
        A
        ArekOwenWolk
        November 13, 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.

         

          Anudeep_Garnepudi
          Community Advisor
          Anudeep_GarnepudiCommunity Advisor
          Community Advisor
          November 16, 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

            Marvin_Flock
            Marvin_Flock作成者
            Level 2
            November 16, 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.

             

             

             

             

             

             

             

             

             

             

            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:

             

             

             

             

             

             

              A
              ArekOwenWolk
              November 16, 2020

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

              Anudeep_Garnepudi
              Community Advisor
              Anudeep_GarnepudiCommunity Advisor
              Community Advisor
              November 16, 2020

              @marvin_flock 

              I can see values being set on load.

               

              I am using the same tab that you shared.

                Marvin_Flock
                Marvin_Flock作成者
                Level 2
                November 16, 2020
                Interesting, you are on 6.5?
                Anudeep_Garnepudi
                Community Advisor
                Anudeep_GarnepudiCommunity Advisor
                Community Advisor
                November 16, 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

                  契約条件Accessibility statement

                  Loading footer...