DOM values of existing Multifield Items changing after adding New | Community
Skip to main content
T
troubleshooter3
Level 3
October 3, 2023
Solved

DOM values of existing Multifield Items changing after adding New

  • October 3, 2023
  • 2 replies
  • 798 views

I have a custom tab in page properties where I have a multifield, the multifield consist of a coral-textfield which I convert to a coral-autocomplete through jquery on page load like below example :

 

 

 

 

Coral.commons.ready(autocomplete, function () { autocomplete = new Coral.Autocomplete().set({ placeholder: "place holder", name: "/xyz", match: "startswith", required: true, delay: 600 });

 

 

This works quite well the first time despite I add one or 10 items and also saves my autocomplete data at ./xyz in JCR, my issue starts when I load the saved page property and try to add more items to existing multifield, the moment I click add, the name attribute of existing coral-autocomplete in existing multifield-item changes to something like ./xyz./xyz and value becomes empty, and existing fields despite having data shows required, in this whole scenario the newly added item remains correct, similary if I start with 2 and later add 3rd first 2 will get wrong name and value and soon as I click add button of multifield to add 3rd item.

 

I am on 6.5 and use coral UI3

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by ManviSharma

Hi,

 

When initializing the Coral Autocomplete component, refrain from setting the name attribute to a generic value like "/xyz." Instead, employ a more unique and robust naming convention. Consider appending a unique identifier or counter to the name attribute, such as "/xyz_1," "/xyz_2," and so forth. This adjustment will help prevent conflicts with AEM's multifield naming conventions.

Coral.commons.ready(function () {
// Utilize a unique name attribute, e.g., /xyz_1, /xyz_2, etc.
var uniqueName = "/xyz_" + uniqueIdentifier;

var autocomplete = new Coral.Autocomplete().set({
placeholder: "place holder",
name: uniqueName,
match: "startswith",
required: true,
delay: 600
});
});

 

  • Secondly, When loading the page properties dialog and populating the multifield with pre-existing data from the Java Content Repository (JCR), exercise care in setting the name attribute for each Coral Autocomplete field appropriately based on the data retrieved from the JCR.

 

2 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
October 10, 2023

@mahi1729 @manvisharma  Can you please review this Question and share your thoughts? 

Kautuk Sahni
ManviSharma
Adobe Employee
ManviSharmaAdobe EmployeeAccepted solution
Adobe Employee
October 10, 2023

Hi,

 

When initializing the Coral Autocomplete component, refrain from setting the name attribute to a generic value like "/xyz." Instead, employ a more unique and robust naming convention. Consider appending a unique identifier or counter to the name attribute, such as "/xyz_1," "/xyz_2," and so forth. This adjustment will help prevent conflicts with AEM's multifield naming conventions.

Coral.commons.ready(function () {
// Utilize a unique name attribute, e.g., /xyz_1, /xyz_2, etc.
var uniqueName = "/xyz_" + uniqueIdentifier;

var autocomplete = new Coral.Autocomplete().set({
placeholder: "place holder",
name: uniqueName,
match: "startswith",
required: true,
delay: 600
});
});

 

  • Secondly, When loading the page properties dialog and populating the multifield with pre-existing data from the Java Content Repository (JCR), exercise care in setting the name attribute for each Coral Autocomplete field appropriately based on the data retrieved from the JCR.

 

    Terms & ConditionsAccessibility statement

    Loading footer...