If your cf component works as expected then check this to your jquery code,
The datatype expected should be xml and not json format. Try to change this to see how is it going.

dataType: “json” –> dataType: “xml”

Cheers, Giorgos

// <!–
$(document).ready(function(){

$("#CountriesList").change(function() {
if($(this).val() != ''){
$.ajax({
type: "POST",
url: "http://localhost:8500/theadstreet/adStreetLayouts/adStreetLookup.cfc?method=getStates",
data: ({ state_country_ID_FK: $(this).val() }),
dataType: "json",
success: function(json){
$('#SelectedState option').remove();
$(json).find('record').each(function() {
$("#SelectedState").append('’ + $(this).find(’state_name’).text() + ”);
});
}
});
}
});
});

// –>

Select Country:

…
#CountriesList.Country_name#

Select State:
…

Here is what I have:

CFC

Select state_ID_PK, state_name
From statesTbl

Where state_country_ID_FK = #arguments.state_country_ID_FK#

Order by state_name

CFM

// <!–
$(document).ready(function(){

$("#CountriesList").change(function() {
if($(this).val() != ''){
$.ajax({
type: "POST",
url: "http://localhost:8500/theadstreet/adStreetLayouts/adStreetLookup.cfc?method=getStates",
data: ({ state_country_ID_FK: $(this).val() }),
dataType: "json",
success: function(json){
$('#SelectedState option').remove();
$(json).find('record').each(function() {
$("#SelectedState").append('’ + $(this).find(’state_name’).text() + ”);
});
}
});
}
});
});

// –>

Select Country:

…
#CountriesList.Country_name#

Select State:
…

Of course you can do that if you like to..

cheers,
Giorgos

Good post! I was banging my head to a brick wall trying to do something on these lines…..Very interesting way of putting things together.

I have a suggestion though,
I see the query name inside CFC not being declared in a var scope which is just a regular practice for me to put on…….

Not a biggie :)

Thanks,
Sam.

There is no onLoad or something, the first select box is filled in with countries data from your database query while the second select box is empty.

Then the $(“#CountriesList”).change function does the trick, once the countries select box value changed the jQuery ajax method call the cfc component which will deliver us cities depending on selected country id.

Sorry I have no files online as this code comes from a project which is still under development.

Am a ColdFusion programmer and have used just a little jQuery.