Select Default value in coral select field at AEM Page Properties 6.3

[naveen_27_05]

Hi All,

I am trying to set default dropdown value at page properties level where I need to first get the selected value and then change the default value based on current url. Below is the code snippet I tried so far: 

$(document).ready(function() {
    var currentUrl = window.location.href;
    	var hrefLang = "x-default";
    	if(currentUrl.indexOf('us/en') > -1){
            hrefLang = "en-US";          
        }
    $("#coral-id-105").each(function(index, value) {
			$("#coral-id-105 coral-selectlist-item[value="+ hrefLang +"]").prop('selected', true);
		});
});

I am getting undefined every time when I am trying to alert the current value.

Note: I don't need to add value from datasource. I have static values just need to set one as default.

@arunpatidar @Suraj_Kamdi 

[naveen_27_05]

Hi,

can anyone help me.

Thanks.

[Kiran_Vedantam]

Hi @naveen_27_05 

Are you saying that you are not able to get the value selected in the drop-down? Can you be more specific?

Thanks,

Kiran Vedantam.

[nave_27]

Hi Kiran,

Yes, I am unable to set the default dropdown value with the js I have shared in the code snippet above.

Thank you.

[arunpatidar]

Hi,

Your code should look like something below.

This is not tested but just an idea to execute code on pageproperty dialog load event

(function (document, $) {
    "use strict";

    
    var currentUrl = decodeURIComponent(window.location.href);
    var hrefLang = "x-default";
    const dropDownSelector = "#coral-id-105"

    $(document).on("foundation-contentloaded", function () {
    setValue(dropDownSelector);
    });

  

    function setValue(dropDownSelector) {
        if(currentUrl.indexOf('us/en') > -1){
            hrefLang = "en-US";          
        }
        $(dropDownSelector).each(function() {
            $(dropDownSelector + " coral-selectlist-item[value="+ hrefLang +"]").prop('selected', true);
        });
    }

})(document, Granite.$);

[naveen_27_05]

Hi,

I have tried with same way for single drop down it's working if we have 3 or 4 dropdown value id getting changed for each value so I have tried with creating the class and I tried executing the same code by changing the id to class but not working.

	    $(window).on("load", function() {
      
       // e.preventDefault();
        var currentUrl = window.location.href;
        var hrefLang = "x-default";
        if (currentUrl.indexOf('us/en') > -1) {
            hrefLang = "en-US";
        }else if(currentUrl.indexOf('fr/fr') > -1){
			hrefLang = "fr-FR";
        }
        $(".href-lang-dropdown").each(function(index, value) {

            $(".href-lang-dropdown coral-selectlist-item[value=" + hrefLang + "]").prop('selected', true);
        });
    });

Thank you.

[arunpatidar]

what property did you added?

granite:class for coral3 or class (for coral3)?

you need to check the HTML dom, the custom id/class are added to the corel-select element.

[naveen_27_05]

Hi,

Added granite:class for coral3. I checked that there is no custom id and class in coral-select-element.

[arunpatidar]

It should be added. Can you share your dialog xml?

[nave_27]

Hi,

I have added granite:class and I am able to make default value but I have one issue when I open the page properties en/us it's showing default value as en-US when I open de/de page it should be default value as de-DE when i open the page first it is not showing if I load it again then default is setting. 

	    $(window).on("load", function() {
       // e.preventDefault();
        var currentUrl = window.location.href;
        var hrefLang = "x-default";
        if (currentUrl.indexOf('us/en') > -1) {
            hrefLang = "en-US";
        }else if(currentUrl.indexOf('fr/fr') > -1){
			hrefLang = "fr-FR";
        }else if(currentUrl.indexOf('de/de') > -1){
			hrefLang = "de-DE";
        }else if(currentUrl.indexOf('jp/ja') > -1){
			hrefLang = "ja-JP";
        }else if(currentUrl.indexOf('int/en/') > -1){
			hrefLang = "en-INT";
        }

        $(".href-lang-dropdown").each(function(index, value) {

            $(".href-lang-dropdown coral-selectlist-item[value=" + hrefLang + "]").prop('selected', true);
        });
    });

  <href_lang
                                                granite:class="href-lang-dropdown"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                fieldLabel="Href language Tags"
                                                name="./hreflangtag"
                                                value="true">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <default
                                                        jcr:primaryType="nt:unstructured"
                                                        text="x-default"
                                                        value="x-default"/>
                                                    <en-US
                                                        jcr:primaryType="nt:unstructured"
                                                        text="en-US"
                                                        value="en-US"/>
                                                    <de-DE
                                                        jcr:primaryType="nt:unstructured"
                                                        text="de-DE"
                                                        value="de-DE"/>
                                                    <fr-FR
                                                        jcr:primaryType="nt:unstructured"
                                                        text="fr-FR"
                                                        value="fr-FR"/>
                                                    <ja-JP
                                                        jcr:primaryType="nt:unstructured"
                                                        text="ja-JP"
                                                        value="ja-JP"/>
                                                    <en-INT
                                                        jcr:primaryType="nt:unstructured"
                                                        text="en-INT"
                                                        value="en-INT"/>
                                                </items>
                                            </href_lang>

[arunpatidar]

Can you try changing the event from

$(window).on("load", function() {
...
}

To

$(document).on("foundation-contentloaded", function () {
    ...
    });

[nave_27]

Hi,

I tried it but not working.

Thanks.