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

Avatar

Avatar

guruprasadc9901

Avatar

guruprasadc9901

guruprasadc9901

03-01-2020

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.

Replies

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

04-01-2020

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

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

Avatar

Avatar

guruprasadc9901

Avatar

guruprasadc9901

guruprasadc9901

06-01-2020

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

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

06-01-2020

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

Avatar

Avatar

guruprasadc9901

Avatar

guruprasadc9901

guruprasadc9901

06-01-2020

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

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

06-01-2020

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.

Avatar

Avatar

guruprasadc9901

Avatar

guruprasadc9901

guruprasadc9901

06-01-2020

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

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

883
Arun_Patidar
MVP

07-01-2020

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.