AEM 6.4: Is the coral-ui event foundation-contentloaded broken? | Community
Skip to main content
Marvin_Flock
Marvin_Flock
Level 2
November 13, 2020
Solved

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

  • November 13, 2020
  • 7 replies
  • 6477 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by 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 replies

    Anudeep_Garnepudi
    Community Advisor
    Anudeep_GarnepudiCommunity AdvisorAccepted solution
    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_FlockAuthor
      Level 2
      November 13, 2020
      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?
      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_FlockAuthor
        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_FlockAuthor
            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_FlockAuthor
                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

                  Terms & ConditionsAccessibility statement

                  Loading footer...