Level 4

Solved

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

Forum|Forum|2 years ago
August 14, 2023
4 replies
2328 views

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">

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Mahedi_Sabuj

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

Saravanan_Dharmaraj

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

Mahedi_Sabuj

Accepted solution

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

Mahedi Sabuj

ksh_ingole7

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,

Sudheer_Sundalam

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!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded