Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Dynamic select inside multifield

Avatar

Level 2

Hi,

On country selection, I am populating states through ajax call in select inside multifield. State option is working fine, when we have only one section (or single state in select) inside multifield.

Please find below screenshot for the same.

single_select.PNG

Issue:

1. Clicking on add new to add second or more state.

2. The click event on select will not work and also will not be able to see the options options too. 

Please found below image for the same.

multifield_issue.PNG

Below is the code snippet to get country from data source, and on selection of country we are getting states through ajax call.

(function($, $document) {

    "use strict";

     var STATE = "./stateSelect";

     var SELECTBOX = './countrySelect';

     $document.on("dialog-ready", function() {

          $("[name='"+SELECTBOX+"']").next().children().click(function() {

               getStates($(this).attr('data-value'));

          });

          var stateList = [];

          function getStates(countrySelect){

                 var url = "/bin/services/optus/getStateServlet."+countrySelect+".json";

                 $.getJSON(url).done(function(data) {

                     stateList = data;             

                     addStateToSelectBox(stateList.countries)

                 });

          }     

         function addStateToSelectBox( dataSet) {

               var state = new CUI.Select({

                   element: $("[name='" + STATE +"']").closest(".coral-Select")

               });

                _.each(dataSet, function(key, value) {

                     $("<option>").appendTo(state._nativeSelect).val(key.state_name).html(key.state_name);

                });

        }     

});

})($, $(document));

Thanks

10 Replies

Avatar

Level 10

What AEM version are you using? Are you using the lastest Multifield - which is granite/coral.

Avatar

Level 10

For those reading this thread - use the latest multifield with AEM 6.3/6.4 --

  • granite/ui/components/coral/foundation/form/multifield

See - Scott's Digital Community: Building Experience Manager Component using Granite/Coral Resource Types

Another observation about your code - you certainly do not need to use JS to populate a Select field in a dialog. You can use DataSource - which is covered in above article.

Avatar

Level 2

I am using AEM 6.1

with multifield...granite/ui/components/foundation/form/multifield

Avatar

Level 10

The newer coral/granite types make it easier to work with these data types. For example - the corel/granite Multifield does not need JS or ACS-Commons.

However - you can still use DataSource object to populate a Select field. See this article.

Adobe Experience Manager Help | Using Granite DataSource objects to populate AEM Touch UI objects

Populating a Select field via the DataSource object is the best practice. See if that helps your issue.

Avatar

Level 10

So from i am seeing - you are using the DataSource object to populate the Country Select field. Then you wan to use script to populate the inner Select which is also in a Multifield?

Avatar

Level 2

correct...only stateis in multifield...and country can have multiple states.

Avatar

Community Advisor

HI,

Since click on "Add field" is another event from the user end, perhaps it loses click event on Country select dropdown and hence getStates function call.

Below link has an almost similar implementation to that of yours with a difference being below listed, see if that helps/agreed in your project

  • textfield instead of select inside multifield
  • "add field" of multifield is triggered from the code for how many ever state we have for the country selected.
  • state value is populated in the textfield inside multfield.

Experiencing Adobe Experience Manager - Day CQ: AEM 61 - TouchUI Add Items to Multifield based on Se...

Avatar

Community Advisor

Adding to the above, it is suggested to follow Coral UI3 resources only for dialog fields, only the implementation approach can be referred from the link shared.

Avatar

Level 10

Hi Imran,

In order to populate the select dropdown, you can use Datasource object than JS

Check this article for your reference.: Adobe Experience Manager Help | Using an WCMUsePojo class to populate an Experience Manager Touch UI...

Hope this helps!!

Thanks,

Ratna.

Avatar

Level 2

Hi,

I am using datasource only to render countries, but not able to render states in select with multifield.

Thanks