Two ComboBox with Web service

[murad898]

If I have two ComboBoxs:
1. Combobox1 --> provide some country names... (Web service)
2. Combobox2 --> provide some city names... (Web service)

How can I make both of them work together?
When I choose a country name from the first Combobox1 all cities related to that country will be shown on the second Combobox2.




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="386" height="345" creationComplete="initApp()">

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.utils.ArrayUtil;
import mx.utils.ObjectProxy;

private var urlTo:String;
private var parstatus:String;


private function initApp():void {

reLoadXml();


}

[Bindable]
private var myData:ArrayCollection;

private function resultHandler(event:ResultEvent):void {

try
{

if (event.result.DataSet.diffgram.MPCS.BI is ArrayCollection) {
myData = event.result.DataSet.diffgram.MPCS.BI;
} else if (event.result.DataSet.diffgram.MPCS.BI is ObjectProxy){
myData = new ArrayCollection(ArrayUtil.toArray(event.result.Dat aSet.diffgram.MPCS.BI));
}

if (myData.length == 0)
{
Alert.show("Unable to get data from webservice " , "Info");
}


}
catch (error:Error)
{

var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}

private function reLoadXml2():void{
cityService.url = "ws_BiList.asmx/GetCity";

try
{
cityService.send();
}
catch (error:Error)
{
var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}

private function reLoadXml():void{
countryService.url = "ws_BiList.asmx/GetCountry";


try
{
countryService.send();
}
catch (error:Error)
{
var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}
public function defaultFault(event:FaultEvent):void {

Alert.show("Unable to get data from webservice " + countryService.url + " - " + event.fault.faultString , "Error");
}

private function closeHandler(event:Event):void {
reLoadXml2();
}



]]>
</mx:Script>
<mx:Style source="testme.css"/>
<mx:HTTPService id="countryService" url="" result="resultHandler(event)" method="GET" fault="defaultFault(event)" showBusyCursor="true"/>
<mx:HTTPService id="cityService" url="" result="resultHandler(event)" method="GET" fault="defaultFault(event)" showBusyCursor="true"/>



<mx:Panel title=" ADD NEW MCC/PAC " width="365" height="323"
paddingTop="5" paddingLeft="5" paddingRight="5"
paddingBottom="5" x="11" y="12">

<mx:Form width="319" height="270">

<mx:FormItem label="BI No. : " fontWeight="bold">
<mx:ComboBox x="128" prompt="select BI..." y="10" id="binumber" width="170" dataProvider="{myData}" labelField="BI_NUMBER" close="closeHandler(event);" />
</mx:FormItem>

<mx:FormItem id="menu2" label="Partial Status: " fontWeight="bold">
<mx:ComboBox id="parstat" prompt="select partial..." width="170" dataProvider="{myData}" labelField="BI_TITLE" />
</mx:FormItem>

</mx:Form>

</mx:Panel>

</mx:Application>

[Sly_cardinal]

I've bound your city combobox to a different ArrayCollection instance - this instance (cityData) is now populated by the 'countryResultHandler' function that is the result handler for the 'countryService'.

As I've noted in the code below you will need to pass the selected country to the cityService so you can find the cities that relate to that country - that list of cities is then used to populate the cityData ArrayCollection which is then displayed in the 'parstat' combobox.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="386" height="345"
creationComplete="initApp()">

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.utils.ArrayUtil;
import mx.utils.ObjectProxy;

private var urlTo:String;
private var parstatus:String;


private function initApp():void {

reLoadXml();

}

[Bindable]
private var countryData:ArrayCollection;

[Bindable]
private var cityData:ArrayCollection;

private function countryResultHandler(event:ResultEvent):void {

try
{

if (event.result.DataSet.diffgram.MPCS.BI is ArrayCollection) {
countryData = event.result.DataSet.diffgram.MPCS.BI;
} else if (event.result.DataSet.diffgram.MPCS.BI is ObjectProxy){
countryData = new ArrayCollection(ArrayUtil.toArray(event.result.Dat aSet.diffgram.MPCS.BI));
}

if (countryData.length == 0)
{
Alert.show("Unable to get data from webservice " , "Info");
}

}
catch (error:Error)
{

var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}

private function cityResultHandler(event:ResultEvent):void {

try
{

if (event.result.DataSet.diffgram.MPCS.BI is ArrayCollection) {
cityData = event.result.DataSet.diffgram.MPCS.BI;
} else if (event.result.DataSet.diffgram.MPCS.BI is ObjectProxy){
cityData = new ArrayCollection(ArrayUtil.toArray(event.result.Dat aSet.diffgram.MPCS.BI));
}

if (cityData.length == 0)
{
Alert.show("Unable to get data from webservice " , "Info");
}

}
catch (error:Error)
{

var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}

private function reLoadXml2():void{

var selectedCountry:String = binumber.selectedValue;
cityService.url = "ws_BiList.asmx/GetCity";

try
{
// TODO: Pass the selectedCountry value to the remote service
// so that it can filter out cities that do not relate to
// that country.
// e.g.: cityService.send(selectedCountry);
cityService.send();
}
catch (error:Error)
{
var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}

private function reLoadXml():void{
countryService.url = "ws_BiList.asmx/GetCountry";

try
{
countryService.send();
}
catch (error:Error)
{
var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);

}

}
public function defaultFault(event:FaultEvent):void {

Alert.show("Unable to get data from webservice " + countryService.url + " - " + event.fault.faultString , "Error");
}

private function closeHandler(event:Event):void {
reLoadXml2();
}

]]>
</mx:Script>
<mx:Style source="testme.css"/>
<mx:HTTPService id="countryService" url="" result="countryResultHandler(event)" method="GET"
fault="defaultFault(event)" showBusyCursor="true"/>
<mx:HTTPService id="cityService" url="" result="cityResultHandler(event)" method="GET"
fault="defaultFault(event)" showBusyCursor="true"/>

<mx:Panel title=" ADD NEW MCC/PAC " width="365" height="323"
paddingTop="5" paddingLeft="5" paddingRight="5"
paddingBottom="5" x="11" y="12">

<mx:Form width="319" height="270">

<mx:FormItem label="BI No. : " fontWeight="bold">
<mx:ComboBox x="128" prompt="select BI..." y="10" id="binumber" width="170"
dataProvider="{countryData}" labelField="BI_NUMBER" close="closeHandler(event);" />
</mx:FormItem>

<mx:FormItem id="menu2" label="Partial Status: " fontWeight="bold">
<mx:ComboBox id="parstat" prompt="select partial..." width="170"
dataProvider="{cityData}" labelField="BI_TITLE" />
</mx:FormItem>

</mx:Form>

</mx:Panel>

</mx:Application>