Dynamic select inside multifield

Avatar

Avatar

imrank18551706

Avatar

imrank18551706

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

13-04-2018

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

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

Avatar

Avatar

Ratna_Kumar

MVP

Avatar

Ratna_Kumar

MVP

Ratna_Kumar
MVP

13-04-2018

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

Avatar

imrank18551706

Avatar

imrank18551706

imrank18551706

13-04-2018

I am using AEM 6.1

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

Avatar

Avatar

imrank18551706

Avatar

imrank18551706

imrank18551706

13-04-2018

Hi,

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

Thanks

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
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?

Avatar

Avatar

imrank18551706

Avatar

imrank18551706

imrank18551706

13-04-2018

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

Avatar

Avatar

Vijayalakshmi_S

MVP

Avatar

Vijayalakshmi_S

MVP

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