Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Loop not working for multifield

Shaheena_Sheikh
Level 4
Level 4

$(".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
asutosh_jena
Correct answer by
Community Advisor
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
KiranVedantam1992
Community Advisor
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.

Shaheena_Sheikh
Level 4
Level 4
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
Correct answer by
Community Advisor
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

Shaheena_Sheikh
Level 4
Level 4
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
Community Advisor
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);