Highlighted

Dynamic select inside multifield

imrank18551706

13-04-2018

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

Replies

Highlighted

smacdonald2008

13-04-2018

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.

Highlighted
Highlighted

smacdonald2008

13-04-2018

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.

Highlighted

smacdonald2008

13-04-2018

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?

Highlighted

Vijayalakshmi_S

MVP

16-04-2018

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...