How to retain previously selected dialog value from the dynamic dropdown in authoring dialog | Community
Skip to main content
K
Kirthika
Level 2
May 29, 2025

How to retain previously selected dialog value from the dynamic dropdown in authoring dialog

  • May 29, 2025
  • 5 replies
  • 846 views

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.

 

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

5 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
May 29, 2025

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
    Community Advisor
    kapil_rajoriaCommunity Advisor
    Community Advisor
    May 30, 2025

    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.

      K
      KirthikaAuthor
      Level 2
      May 30, 2025

      in crx de page properties we can be able to see the value

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      May 30, 2025

      Hi @kirthika 

      Please check https://medium.com/@arunpatidar26/dynamic-dropdown-in-aem-touch-ui-cc502022da24 

      Arun Patidar
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        June 23, 2025

        @kirthika Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...