Expand my Community achievements bar.

Issue with closest(".coral-Select"); in aem 6.5

Avatar

Level 1

Hi team,
when am trying to get an value from drop down in selection field using closest(".coral-Select") getting an undefined value.
is there any change in aem 6.5? but it works fine in aem 6.3.
EX: var a = $("[name='./componentMode']").closest(".coral-Select");

if iam trying to print $("[name='./componentMode']") ,value is getting populated in console,when iam trying with $("[name='./componentMode']").closest(".coral-Select"); getting undefined in console.
can you suggest any solution.

7 Replies

Avatar

Community Advisor

can you try with. you may be using granite components.

$("[name='./componentMode']").closest(".coral3-Select");



Arun Patidar

Avatar

Level 1

Hi Arun,
I tried with above coral3-select but it didn't worked ,getting same issue (value as undefined).

Iam having one more issue in JS in show/hide tab .
EX:can you please find below spinet,
function events() {
var select = $('.coral-Form-fieldwrapper #banner_select coral-select-item[selected]').val();

here i can able to get "select" value
if (select != undefined) {
if (select == "homebanner") {
$('a[aria-controls="homebannerid"]').show();
$('a[aria-controls="productbannerid"]').hide();
$('a[aria-controls="blogbannerid"]').hide();
$('a[aria-controls="resourcebannerid"]').hide();
$('a[aria-controls="prefooterbannerid"]').hide();
$('a[aria-controls="historybannerid"]').hide();
}
in this "aria-controls" is not working .
Is there any alternative for this to use?

Thanks,

Guru.

Avatar

Community Advisor

Hi,

try with either one of them based on coral or granite resoirce type you are using.

$("input[name='./componentMode']").closest(".coral3-Select"); 

or

$("input[name='./componentMode']").closest(".coral-Select");

 

you can simple look for DOM structure and parse through, the DOM structure may be changed in 6.5

I can see the aria-controls in DOM but theses are ids not option values.

 

Could you please explain in more details what is your requirement?

 

Example DOM for Coral3 dropdown

 

dropdown1.PNG



Arun Patidar

Avatar

Level 1

Hi Arun,

1)i tried using this $("input[name='./componentMode']").closest(".coral3-Select"); works fine,
but iam facing issues with select.
EX:var.on('selected.select') function(event) ......

find('select')

2)I can see the aria-controls in DOM but theses are ids not option values.---->for this iam using id's.based on id's iam trying to show/hide an tabs in dialog's.

function events() {
var select = $('.coral-Form-fieldwrapper #banner_select coral-select-item[selected]').val();

here i can able to get "select" value
if (select != undefined) {
if (select == "homebanner") {
$('a[aria-controls="homebannerid"]').show();
$('a[aria-controls="productbannerid"]').hide();
$('a[aria-controls="blogbannerid"]').hide();
$('a[aria-controls="resourcebannerid"]').hide();
$('a[aria-controls="prefooterbannerid"]').hide();
$('a[aria-controls="historybannerid"]').hide();
}

node str:

<homebanner
granite:id="homebannerid"
jcr:primaryType="nt:unstructured"
jcr:title="Home Banner Configuration"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">


this is how iam calling.
Thanks ,
guru

Avatar

Community Advisor

1. you can write an event of for dropdown like below e.g. 

 

$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
        showHideHandler($(this));
    });

better to add an id or class to dropdown to get item easily 

2. just use id without a tag

e.g.
$('#homebannerid').show();
$('#productbannerid').hide();

but you may need to take care of hidding tab list as well.



Arun Patidar

Avatar

Level 1

Hi Arun,

1)This is how i had written an event,here modeType is an variable, contains an string.
modeType.on('selected.select', function(event) {
showHideSection($(this));
});
}

I tried what you have given as example ,but both the cases value is getting as undefined.

2)I tried giving id's  without tags,but i didn't get any show/hide functionality .

thanks,
guru.

Avatar

Community Advisor

Hi Guru,

without seeing complete dialog/DOM structure of dialog and JS code,  it hard to point out exact error/issue.

 

can you try to write console.log and check browser console for errors? if possible you can share the dialog xml and js.



Arun Patidar