3 Replies Latest reply on Jan 28, 2010 11:29 PM by archemedia

    Combo Box - Multi link Combo box (country-state-city)?

    Learningflex003

      Hello everybody,

       

      Trying to link 3 combo boxs together (country, province/state, city). For simplicity the code below only has 2 combo box.

       

      Using PHP, I was able to populate the country combo box.
      Using PHP again I can populate the province/state combo box but here’s where I’m running into problems.
      If I hard code the prov/state into combo box(prov/sate) it pulls the data  but I need to link it to the country combo box so the prov/state comboBox is populated  based on the country selection.

       

      how do I link the 2 combo box so that the prov/state combox2 is populated based on the country combo box selection.

       

      I'm still learning Flex so if there is a better way to do this please let me know.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
      <mx:Script>
              <![CDATA[
                  import mx.collections.XMLListCollection;
                  import mx.controls.Alert;
                  import mx.rpc.events.ResultEvent;      
                  import mx.rpc.events.FaultEvent;
                  import mx.events.ListEvent;
            
                  [Bindable]
                  private var countryinfo:XMLListCollection = new XMLListCollection();
                  [Bindable]
                  private var provinceStateinfo:XMLListCollection = new XMLListCollection();          
                
                  [Bindable]
                  private var labelcountry1:String;
                  [Bindable]
                  private var dropdownSelection2:String;
                  [Bindable]
                  private var dropdownSelection3:String;
                                                                
                  private function initApp():void
                  {    dropBox1.send();  
                      Country1.addEventListener(ListEvent.CHANGE, DropDownBox1Handler);                      
                  }  
                
                  private function DropDownBox1Handler(event:ListEvent ):void
                  {  // sent to a label control to indicate the selection for testing

                     labelcountry1 = event.currentTarget.selectedItem;             
                  }
                
                  private function boxoneHandler(event:ResultEvent):void
                  {  // this works
                     var result1:XMLList = new XMLList();
                     result1 = event.result.location.country;
                     countryinfo.source = result1;
                     dropBox2.send();
                  }
            
                private function boxtwoHandler(event:ResultEvent):void
                 {   // problem area sec. combo box
                     var result2:XMLList = new XMLList();
                     result2 = event.result.location.province;
                     provinceStateinfo.source = result2;

                 }
            
                  private function faultHandler(event:FaultEvent):void
                  {    Alert.show(event.fault.faultString, event.fault.faultCode);              
                  }
              ]]>
          </mx:Script>
        
          <mx:HTTPService id="dropBox1" url="http://localhost/Learning/inc/userlocationC.php"
               useProxy="false"  method="POST" result="boxoneHandler(event)" fault="faultHandler(event)" resultFormat="e4x"/>
              
          <mx:HTTPService id="dropBox2" url="http://localhost/Learning/inc/userlocationPS.php"
               useProxy="false"  method="POST" result="boxtwoHandler(event)" fault="faultHandler(event)" resultFormat="e4x">
               <mx:request xmlns="">
                  <provincestate>{countryinfo}</provincestate>          
              </mx:request>
              </mx:HTTPService>    
              
                 
          <mx:Panel x="60" y="10" width="473" height="200" layout="absolute" title="Multiple Drop Down List box example">
              <mx:Label text="Country:" width="64" fontSize="12" fontWeight="bold" x="60" y="10"/>
              <mx:ComboBox id="Country1"  dataProvider="{countryinfo}"  x="132" y="10" width="189"></mx:ComboBox>
              <mx:Label id="lab1" x="18" y="132" text="{labelcountry1}" width="149"/>
              <mx:Label text="Province/State:" width="123" fontSize="12" fontWeight="bold" x="10" y="59"/>
              <mx:ComboBox id="provinceState1"  dataProvider="{provinceStateinfo}" x="132" y="59" width="189"></mx:ComboBox>
          </mx:Panel>  
      </mx:Application>

        • 1. Re: Combo Box - Multi link Combo box (country-state-city)?
          archemedia Level 4

          What I suggest would be:

           

          1. Have 2 comboboxes ready (you can give them a prompt property like "Please select a country")

          2. Populate the first cb with the result of your 'getCountries' HTTPService

          3. Make an event handler for the change event on the first cb. In this handler, you call the 'getCities' HTTPService which sends the country id as an argument. In the resultfunction of this second service call, you can set an arrayCollection for the second combobox:

           

           

          [Bindable]

          private var countriesCollection:ArrayCollection;

          [Bindable]

          private var citiesCollection:ArrayCollection;

           

          private funtion init():void

          {

               //call the getCountries service;

          }

           

          private function countriesResult(evt:ResultEvent):void

          {

               //populate the countriesCollection

          }

           

          private function selectCountry(evt:Event):void

          {

               //call the getCities service and pass the evt.currentTarge.selectedItem (which holds the selected country name) as an argument

          }

           

          private function citiesResult(evt:ResultEvent):void

          {

               //populate the citiesCollection

               citiesCB.enabled = true;

          }

           

           

          <mx:ComboBox id="countriesCB" dataProvider = {countriesCollection} prompt="Please select a country change="selectCountry(event)"/>

           

          <mx:ComboBox id="citiesCB" dataProvider = {citiesCollection} prompt="Please select a country" change="selectCity(event)" enabled = "false">

           

           

          Dany

          • 2. Re: Combo Box - Multi link Combo box (country-state-city)?
            Learningflex003 Level 1

            Hello Dany,

             

            I greatly appreciate your help.

             

            I think my code is some what similer to what you explained in your post above. I could be wrong but I think the problem is in the httpsercie call, the variable maybe in a wrong formate isn't isn't going over with the call to the php script.

             

            any help you can proved would be greatly appreciated.. thanks Dany

             

            the function which acts on the cb selection:

             

            private function DropDownBox1Handler(event:ListEvent ):void
               {  labelcountry1 = event.currentTarget.selectedItem;       }

             

            <mx:HTTPService id="dropBox2" url="http://localhost/Learning/inc/userlocationPS.php"
               useProxy="false"  method="POST" result="boxtwoHandler(event)" fault="faultHandler(event)" resultFormat="e4x">
               <mx:request xmlns="">
                        <provincestate>{labelcountry1}</provincestate>           
                    </mx:request>
              </mx:HTTPService>

             

             

            My php script for retriving the state/province code:

            require_once("connection.php");

            $wprovincestate = $_POST['provincestate'];

            //$test = "United States";

            $provinceState_query = "SELECT DISTINCT province from tb_location where country = '$wprovincestate'";

            $GetProvince_query = mysqli_query($dbconnect, $provinceState_query) or die('<br/>Error querying Province:'.mysql_error());

             

            print "<?xml version=\"1.0\"?>";

            print "<locations>";

            while($row = mysqli_fetch_array($GetProvince_query))

            { print "<location>";

            print "<province>". $row['province'] . "</province>";

            print "</location>";

            }

            print "</locations>";

            mysqli_close($dbconnect);

             

             

            • 3. Re: Combo Box - Multi link Combo box (country-state-city)?
              archemedia Level 4

              Where do you call the send method of you httpService?

               

              d