Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

How to get the value of a dropdown of the cq:dialog in authoring mode with javascript?

Avatar

Level 5

I have a component that has its cq:dialog file, something I need to do is to perform some validations based on the selected dropdown value.

 

I already have the logic but what I can't get is to obtain the selected value of the dropdown of the cq:dialog

 

I already tried using:

 

-- let dropdownValue = $('#sliderTypeValue');

 

-- let dropdownValue = $('#slideType');
 
-- let dropdownValue = document.querySelector('#sliderTypeValue');
 
-- let dropdownValue = document.querySelector('#slideType');
 
-- let dropdownValue = document.querySelector('#cq-dialog-dropdown-showhide');
 
-- let dropdownValue = $('#cq-dialog-dropdown-showhide');

 

But none of them brings me the value of the the dropdown field on cq:dialog authoring.

 

What can I do in this case?

This is the cq:dialog dropdown I create:

<slideType
                                                granite:class="cq-dialog-dropdown-showhide"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                fieldDescription="Please Choose Slide"
                                                fieldLabel="Slide Type"
                                                name="./slideType"
                                                class="sliderTypeValue">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <tfs-slider--text-over-image
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Title and Text with Background Image"
                                                        value="tfs-slider--text-over-image"/>
                                                    <tfs-slider--stacked
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Title Text and Image stacked one below the other"
                                                        value="tfs-slider--stacked"/>
                                                    <tfs-slider--no-image
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Title, Text and Button"
                                                        value="tfs-slider--no-image"/>
                                                    <tfs-slider-50-50-left
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Image on Left and Title,Text,Button on Right"
                                                        value="tfs-slider-50-50-left"/>
                                                    <tfs-slider-50-50-right
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Image on Right and Title,Text,Button on Left"
                                                        value="tfs-slider-50-50-right"/>
                                                    <tfs-slider--fullwidth-top
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Title,Text with Full width Image Top"
                                                        value="tfs-slider--fullwidth-top"/>
                                                    <tfs-slider--fullwidth-bottom
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Title,Text with Full width Image Bottom"
                                                        value="tfs-slider--fullwidth-bottom"/>
                                                    <tfs-slider--recipe-detail
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Slider Recipe Detail"
                                                        value="tfs-slider--recipe-detail"/>
                                                    <tfs-slider-img-banner
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Image Banner"
                                                        value="tfs-slider-img-banner"/>
                                                </items>
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    cq-dialog-dropdown-showhide-target=".showhidetargets"/>
                                            </slideType>
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

There are several approaches to retrieve the dropdown selection. Here are a few examples: 

// by name
let dropdownValue = $("[name='./slideType']").val() 
// by granite:class
let dropdownValue = $(".cq-dialog-dropdown-showhide").val()

You can check the Inspect Element for better understanding

Screenshot 2023-08-15 at 12.00.22 PM.png

View solution in original post

4 Replies

Avatar

Community Advisor

@Aaron_Dempwolff  Please give this a shot and see if it works and modify the selector accordingly

 

 

(function($, $document) {

    $('#ContentFrame').on('load', function() {
	
        var iframe = $(this)[0],
            iframeDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
	var dd = $(iframeDocument).find('.sliderTypeValue')
        console.log($(dd).val());

    }


})($, $(document));

 

Avatar

Correct answer by
Community Advisor

There are several approaches to retrieve the dropdown selection. Here are a few examples: 

// by name
let dropdownValue = $("[name='./slideType']").val() 
// by granite:class
let dropdownValue = $(".cq-dialog-dropdown-showhide").val()

You can check the Inspect Element for better understanding

Screenshot 2023-08-15 at 12.00.22 PM.png

Avatar

Community Advisor

Hi @Aaron_Dempwolff 

 

Can you try var varSel = $('input[name="./sampleName"]');

Write an event trigger on change of dropdown value and add the above piece of code. You can change the selector to class or id as per your need. This should work. 

 

If it does not try adding debug breakpoints in Chrome Developer tools and see what element is getting captured.

 

Thanks,

Avatar

Community Advisor

@Aaron_Dempwolff ,

Authoring dialog values are only available at the authoring clientlibs. Based on the information provided in your question, it's not clear in which JS you are trying to access the value of the authoring dialog dropdown of interest.

I would suggest, within your component folder, create a new clientlib folder called "clientlib-author" with the following properties

allowProxy="{Boolean}true"
categories="[cq.authoring.dialog,granite.ui.foundation.admin]"

Within this clientlib folder, create a js.txt and author clientlib JS "listeners.js" (you may choose any other name as well but remember to define the same file name in js.txt).

Within the "listeners.js",

 

(function($, $document) {
    "use strict";
    $('#ContentFrame').on('load', function() {

        var iframe = $(this)[0],
            iframeDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
            var dd = $(iframeDocument).find('.sliderTypeValue')
           console.log($(dd).val());
           //Do your stuff here
    }
})($, $(document));

 

Hope this helps!