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

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

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.
    Anudeep_Garnepudi
    Anudeep_GarnepudiAccepted solution
    New Participant
    Nov 13, 2020 2:36 PM UTC

    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 reply

    17 replies

    Anudeep_Garnepudi
    Anudeep_Garnepudi
    New Participant
    Nov 16, 2020 10:54 AM UTC

    @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

    Translate
      Anudeep_Garnepudi
      Anudeep_Garnepudi
      New Participant
      Nov 16, 2020 10:05 AM UTC

      @marvin_flock 

      I can see values being set on load.

       

      I am using the same tab that you shared.

      Translate
        Marvin_Flock
        Marvin_FlockAuthor
        Level 2
        Nov 16, 2020 10:25 AM UTC
        Interesting, you are on 6.5?
        Translate
        Marvin_Flock
        Marvin_FlockAuthor
        Level 2
        Nov 16, 2020 9:22 AM UTC

        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:

         

         

         

         

         

         

        Translate
          ArekOwenWolk
          New Participant
          Nov 16, 2020 12:01 PM UTC

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

          Translate
          Anudeep_Garnepudi
          Anudeep_Garnepudi
          New Participant
          Nov 16, 2020 7:04 AM UTC

          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

          Translate
            ArekOwenWolk
            New Participant
            Nov 13, 2020 3:31 PM UTC

            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.

             

            Translate
              SureshDhulipudi
              SureshDhulipudi
              New Participant
              Nov 13, 2020 2:50 PM UTC

              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();
              });
              });

              Translate
                Marvin_Flock
                Marvin_FlockAuthor
                Level 2
                Nov 13, 2020 3:20 PM UTC
                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?
                Translate
                Anudeep_Garnepudi
                Anudeep_GarnepudiAccepted solution
                New Participant
                Nov 13, 2020 2:36 PM UTC

                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

                Translate
                  Marvin_Flock
                  Marvin_FlockAuthor
                  Level 2
                  Nov 13, 2020 3:23 PM UTC

                  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"

                  Translate
                  Terms & ConditionsAccessibility statement

                  Loading footer...