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.
Arun_Patidar
MVP
Arun_Patidar
MVP
04-01-2020
can you try with. you may be using granite components.
$("[name='./componentMode']").closest(".coral3-Select");
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.
Arun_Patidar
MVP
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
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
Arun_Patidar
MVP
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.
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.
Arun_Patidar
MVP
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.