Expand my Community achievements bar.

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