Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Nested Multifield Loop not getting executed

Avatar

Level 6

I have a dialog where there is nested multifield. In the nested multifield, there's dropdown.

-----

Details of the dialog:

Multifield

  Container (name = Parent)

     Multifield

          Container (name = Child)

              dropdown (class = cq-dialog-dropdown-showhide-multi)

------

Javascript code for looping :

(function ($, document, ns) {

   const A = function () {

         console.log("In A");

      $(this).find("[data-granite-coral-multifield-name='./Child'] .coral3-Multifield-item").each(function( index ) {
         console.log("In Loop");

      })

  };

  $(document).on("change", ".cq-dialog-dropdown-showhide-multi", function() {
      A();
  });

  $(document).on("dialog-ready", function() {
      A();
  });

})(Granite.$, document, Granite.author);

-------

Function A gets called once the dialog content has loaded (on opening the dialog).

Function A gets called when there is a change in dropdown value.

-------

Suppose if my parent multifield has 1 item and its child multifield has 2 items:

Func A gets called when the dialog is opened and "In A In Loop In Loop" gets printed in console. Now if I change the dropdown value, "In A" gets printed in console. The loop doesn't get executed even though the number of child items are still the same.

Not sure what exactly may be the issue. Please advice.

1 Accepted Solution

Avatar

Correct answer by
Level 6
Corrected the code line as below and the loop will start working fine:
$(this).find("[data-granite-coral-multifield-name$='Child'] .coral3-Multifield-item").each(function( index ) {

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @Shaheena_Sheikh 

 

You can use the Model class to achieve the functionality than doing all these iterations in JS. Why are you not using the Sling Models?

 

 

Avatar

Level 6
I need to apply validation everytime the drop-down field is being touched while authoring the component. Will that be possible using model class??

Avatar

Correct answer by
Level 6
Corrected the code line as below and the loop will start working fine:
$(this).find("[data-granite-coral-multifield-name$='Child'] .coral3-Multifield-item").each(function( index ) {

Avatar

Administrator
Thank you for sharing answer with AEM community. This would help in posterity.


Kautuk Sahni