3 Replies Latest reply on Feb 14, 2013 4:19 PM by smcclung007

    Forms dropdown selection changed

    mp05 Level 1

      hi 

      We are using CQ Forms which has multiple dropdowns. On Selection of Country, the States should populate, on selection of state, city should populate. All the values in the 3 dropdowns are populated from external database.

       

      How can we call Jquery Ajax call to servlet to populate the Country dropdown on page load and hencforth on selection of each dropdown making Ajax call.

       

      Can the selection xtype "options"  be linked to a servlet returning JSON array - like /apps/example/myservelt.json which returns the list of Countries on Load of the form?

      Similarly rather calling a javascript function on selectionchanged event of Country dropdown can we call a servlet returning JSON list of States?

       

      Any pointers would be helpful

        • 1. Re: Forms dropdown selection changed
          rush_pawan Level 4

          To answer your first question, Yes you can write servlet to return json respone and can configure it in "options" property of xtype "selection". You have to make sure that the json response format should be same which can be interpreted by "selection" widget. You can take an example of node from your local instance just access "/libs/wcm/msm/components/rolloutconfig/chooser/fieldConfig" where you find the json output file "http://<host>:<port>/libs/wcm/msm/content/commands/rolloutconfigs.json". from front side in wcm console when you can refer it from new-->new live copy-->sync config

           

          To answer your second question, i think you can write listeners at your state and other dependent dropdown but you to analyze more, i can say you to refer http://dev.day.com/docs/en/cq/current/widgets-api/index.html where you can find all the possible events. To write a listener only you have create a "listener"[unstructured] node under the field node (say state node) and override any of the events from api which you think can be suitable to your situation.

          • 2. Re: Forms dropdown selection changed
            Sudharsan S Level 1

            Hi

            You can add the selectionchangedevent to the first dropdown listener and have the logic of getting the data in json format for the second dropdown and convert json to array objects and set the options property for second dropdown using setOptions method. working code below

            var select2= box.findParentByType('panel').findById('select2');

            var select2opts = [];

            response = CQ.utils.HTTP.get("your-json-url.json"); 

            if (CQ.HTTP.isOk(response)){   

                var myObject = CQ.Util.eval(response);

                for (var item in myObject) {

                    select2opts.push({value: myObject[item].value, text:myObject[item].text});

                }

            }

            select2.setOptions(select2opts);

            • 3. Re: Forms dropdown selection changed
              smcclung007

              Hi, rush_pawan. All I need to do is to populate a State and Country dropdown from a flat file somewhere that contains the key - value pairs. What's the simplest way to do this? I'm doing the same for Countries.

               

                "AL" => "Alabama",

                "AK" => "Alaska",

                "AK" => "Alaska",

                "AK" => "Alaska",

               

              etc.

               

              Thank you.

               

              ...Steve