Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Loop not working for multifield

Avatar

Level 6

$(".coral3-Multifield-item").each(function( index ) {}

this loop is not working for the newly added items.

 

$("coral-multifield").children("button[coral-multifield-add]").on("click", function() {

       $(".coral3-Multifield-item").each(function( index ) {
             console.log("add item");

        })});

if I already have 2 items in my multifield when I open the dialog, then the above console log prints 2 times. Now if I Add a new item to the multifield (3rd item), the console log still works for the first 2 items only, though it should have worked for 3 times.

log:

add item

add item

Now if I add another item (4th item), then the log shows 3 times and twice but doesnt show for the 4th item:

add item

add item

add item

 

add item

add item

add item

Now if I save my dialog changes (total item=4) and open the dialog again, and Add a new item, this time console log prints 4 times and doesn't print for the the 5th item.

add item

add item

add item

add item

If there are no items when I open the dialog, and I add a new item, then the log doesn't print at all.

 

I need the run the loop everytime a new item is added.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Shaheena_Sheikh 

 

Adding the below code will execute only on button click and the loop also works as expected. This will run each time a new item is added i.e. each time you click on add button.

 

(function (document, $, ns) {
"use strict";

$(document).on("click", ".coral3-Button--secondary", function (e) {
e.stopPropagation();
e.preventDefault();

//Code from here
$(".coral3-Multifield-item").each(function (index) {
console.log("add item");
})
});

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

Hope this helps!

 

Thanks! 

View solution in original post

5 Replies

Avatar

Community Advisor

Hi @Shaheena_Sheikh,

 

What are you trying to do with the multifield? It is recommended to use Models to handle the business logic.

 

Thanks,

Kiran Vedantam.

Avatar

Level 6
This is more of a validation. I am doing something like this : https://adapttoaem.blogspot.com/2021/02/setting-dynamic-dropdownselect-value-in.html but only difference is that im using colorfield instead of dropdown in a multifield. So using the above code in JS, when i add a new item to the multifield, a new colorfield is present inside the new item and I need to a run a loop over all the existing items + the new item

Avatar

Correct answer by
Community Advisor

Hi @Shaheena_Sheikh 

 

Adding the below code will execute only on button click and the loop also works as expected. This will run each time a new item is added i.e. each time you click on add button.

 

(function (document, $, ns) {
"use strict";

$(document).on("click", ".coral3-Button--secondary", function (e) {
e.stopPropagation();
e.preventDefault();

//Code from here
$(".coral3-Multifield-item").each(function (index) {
console.log("add item");
})
});

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

Hope this helps!

 

Thanks! 

Avatar

Level 6
the above code triggers the console even if i click on a dropdown within multifield, whereas it should trigger only for Add button of multifield. Though the loop issue gets resolved using the above code.

Avatar

Community Advisor

Hi @Shaheena_Sheikh 

 

Targeting the button element only should resolve it.

 

(function (document, $, ns) {
"use strict";

$(document).on("click", "button[coral-multifield-add]", function (e) {
e.stopPropagation();
e.preventDefault();

//Code from here
$(".coral3-Multifield-item").each(function (index) {
console.log("add item");
})
});

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