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

[Aaron_Dempwolff]

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>

[Saravanan_Dharmaraj]

@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));

[Mahedi_Sabuj · Accepted solution]

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

[ksh_ingole7]

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,

[Sudheer_Sundalam]

@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!