Loop not working for multifield

[Shaheena_Sheikh]

$(".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.

[Kiran_Vedantam]

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.

[Shaheena_Sheikh]

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

[Asutosh_Jena_ · Accepted solution]

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! 

[Shaheena_Sheikh]

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.

[Asutosh_Jena_]

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