AEM touch Ui dynamic select options not working in AEM 6.1, but it works in AEM 6.0

[jydps87387977]

Hello,

I am using AEM 6.1, and trying to implement the dynamic select options. And found the following link for reference, but it does not work for me in AEM 6.1, but it works well AEM 6.0

http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html

Is there any update I need to make to get it working ?

[jydps87387977]

Hello,

Can you please share your thoughts on why is it working in AEM 6.0 and not in AEM 6.1.

Thank you.

[smacdonald2008]

I will test the article we have on AEM 6.1 and report back the findings. 

[Lokesh_Shivalingaiah · Accepted solution]

Hi, 

replace listener.js with this code and it should work for 6.1

(function ($, $document) { "use strict"; var LANGUAGE = "./language", COUNTRY = "./country"; function adjustLayoutHeight(){ //with only two selects, the second select drop down is not visible when expanded, so adjust the layout height //fixedcolumns i guess doesn't support css property height, so fallback to jquery //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/layouts/fixedcolumns/index.html $(".coral-FixedColumn-column").css("height", "20rem"); } $document.on("dialog-ready", function() { adjustLayoutHeight(); //http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/select/index.html var language = new CUI.Select({ element: $("[name='" + LANGUAGE +"']").closest(".coral-Select") }); var country = new CUI.Select({ element: $("[name='" + COUNTRY +"']").closest(".coral-Select") }); if(_.isEmpty(country) || _.isEmpty(language)){ return; } var langCountries = {}; //workaround to remove the options getting added twice, using CUI.Select() language._selectList.children().not("[role='option']").remove(); function fillCountries(selectedLang, selectedCountry){ country._nativeSelect.children().remove(); country._selectList.children().remove(); _.each(langCountries, function(value, lang){ if( (lang.indexOf(selectedLang) !== 0) || (value.country == "*") ){ return; } $("<option>").appendTo(country._nativeSelect) .val(lang).html(value.country); }); country = new CUI.Select({ element: $("[name='" + COUNTRY +"']").closest(".coral-Select") }); if(!_.isEmpty(selectedCountry)){ country._nativeSelect.val(selectedCountry).trigger('change'); } } //listener on language select for dynamically filling the countries on language select language._selectList.on('selected.select', function(event){ fillCountries(event.selectedValue); }); //get the langs list $.getJSON("/libs/wcm/core/resources/languages.2.json").done(function(data){ langCountries = data; var $form = country.$element.closest("form"); //get the second select box (country) saved value $.getJSON($form.attr("action") + ".json").done(function(data){ if(_.isEmpty(data)){ return; } fillCountries(language.getValue(), data.country); }) }); }); })($, $(document));

[jydps87387977]

Thank you Bsloki. Your solution rocks!!

[jydps87387977]

What documentation I could go through to learn about the fix that you make.

I see that you have used '_nativeSelect' with CUI.Select. Where is the _nativeSelect documented ?