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

[guruprasadc9901]

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.

[Arun_Patidar]

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

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

[guruprasadc9901]

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.

[Arun_Patidar]

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

[guruprasadc9901]

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

[Arun_Patidar]

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.

[guruprasadc9901]

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.

[Arun_Patidar]

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.