Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

guruprasadc9901
Level 1
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
Arun_Patidar
Community Advisor
Community Advisor

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

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

guruprasadc9901
Level 1
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.

Arun_Patidar
Community Advisor
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

guruprasadc9901
Level 1
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

Arun_Patidar
Community Advisor
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.

guruprasadc9901
Level 1
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.

Arun_Patidar
Community Advisor
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.