Adobe Experience Manager Sites & More

Kirthika · 5/29/25

So my questions like I have created two filed in authoring dialog,
A - for country

B - for state

here in Country dropdown A is populating from json file through servlet and state dropdown B is populating based on the country selected in the dialog, through ajax it's fetch, have written servlet for that(state has another json file).

But while selecting the state like "xyz" and authoring the dialog,it's fine.

when I open the dialog again the state value is not showing in the dialog but i can able to see it's storing in the page path.

Could any one suggest to proceed further to retain state dropdown value.

SantoshSai · 5/29/25

Hi @Kirthika,

You need to manually set the saved value as selected after the options are loaded via AJAX.

Add a data-selected attribute (or hidden input) to store the saved value.

This is usually done in the dialog XML or via JavaScript.

Example:

<state
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    name="./state"
    fieldLabel="State"
    data-selected="${state}"/>

OR dynamically via JavaScript – you can pull the value from the hidden field or get the .val() of the input.

After AJAX loads the states, select the previously saved value.

Update your JS code that populates the states to:

(function(document, $) {
    $(document).on("dialog-ready", function() {
        const stateField = $("coral-select[name='./state']");
        const savedState = stateField.attr("data-selected"); // Or get from hidden input

        $("coral-select[name='./country']").on("change", function() {
            const selectedCountry = $(this).val();

            // Make AJAX call to get states
            $.ajax({
                url: "/bin/getstateservlet?country=" + selectedCountry,
                method: "GET",
                success: function(response) {
                    stateField.empty();

                    // Append options
                    $.each(response.states, function(index, state) {
                        const option = new Coral.Select.Item();
                        option.value = state.value;
                        option.textContent = state.text;
                        stateField[0].items.add(option);

                        // Check if this was the previously saved value
                        if (state.value === savedState) {
                            stateField.val(state.value);
                        }
                    });
                }
            });
        });

        // Trigger change on dialog ready to repopulate and re-select state
        $("coral-select[name='./country']").trigger("change");
    });
})(document, Granite.$);

Santosh Sai

kapil_rajoria · 5/29/25

Hi @Kirthika,
If the state value is not retaining, there might be some issues with your model. Can you debug and share the observations?
Also, check if in crxde, the value is being saved or not.