AEM touch Ui dynamic select options not working in AEM 6.1, but it works in AEM 6.0 | Community
Skip to main content
jydps87387977
Level 3
March 2, 2016
Solved

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

  • March 2, 2016
  • 5 replies
  • 3543 views

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 ?

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 Lokesh_Shivalingaiah

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));

5 replies

jydps87387977
Level 3
March 2, 2016

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
Level 10
March 2, 2016

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

Lokesh_Shivalingaiah
Lokesh_ShivalingaiahAccepted solution
Level 10
March 3, 2016

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
Level 3
March 3, 2016

Thank you Bsloki. Your solution rocks!!

jydps87387977
Level 3
March 4, 2016

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 ?