Issue when trying selectItem on Cascade

[juanellisParticipant]

Hi, I’m using two drodownlist items in cascade. and they populate just as expected. The problem is when I’m retreiving information from database, both populate, and the first one sets “selectItem” properly and selects the item, then triggers the on change event to populate the second, but when using “selectItem” on the second it doesn’t gets selected.

Please, i’d appreciate some help. Thank you in advanced.

this is the code i’m using:

var sourceDepartamentos = {
	datatype: "json",
	datafields: [
		{ name: 'GenDprtmntos_CdgoDprtmnto' },
		{ name: 'GenDprtmntos_NmbreDprtmnto' }
	],
	url: 'actions/gendata.php?a=getdpto',
	async: true
};
var dataAdapterDepartamentos = new $.jqx.dataAdapter(sourceDepartamentos);

$("#gen_user_Dprtmnto").jqxDropDownList({ source: dataAdapterDepartamentos, displayMember: "GenDprtmntos_NmbreDprtmnto", valueMember: "GenDprtmntos_CdgoDprtmnto", width: 300, height: 20, placeHolder: "--Seleccione--" });

$("#gen_user_Mncpio").jqxDropDownList({ width: 300, height: 20, placeHolder: "--Seleccione--" });

$.ajax({
	type: 'GET',
	url: 'actions/gendata.php?a=getusrdata&usr='+ $("#usr").val(),
	data: { get_param: 'value' },
	dataType: "json",
	success: function(data){
		$("#gen_user_Dprtmnto").jqxDropDownList('selectItem',data[0].gen_user_Dprtmnto);
		$("#gen_user_Mncpio").jqxDropDownList('selectItem',data[0].gen_user_Mncpio);
	}
});

$("#gen_user_Dprtmnto").on('change', function (event) {
	var item = $("#gen_user_Dprtmnto").jqxDropDownList('getSelectedItem');
	$("#gen_user_Mncpio").val(null);
	var sourceCiudad =	{
		datatype: "json",
		datafields: [
			{ name: 'GenMncpios_CdgoMncpio'},
			{ name: 'GenMncpios_NombreMncpio'}
		],
		url: 'actions/gendata.php?a=getciu&dpto='+item.value,
		async: true
	};
	var dataAdapterCiudad = new $.jqx.dataAdapter(sourceCiudad);
	$("#gen_user_Mncpio").jqxDropDownList({ source: dataAdapterCiudad, displayMember: "GenMncpios_NombreMncpio", valueMember: "GenMncpios_CdgoMncpio", width: 300, height: 20, placeHolder: "--Seleccione--" });
});

[ChristopherParticipant]

Hi juanellis,

We can’t test your code because we don’t have the data you’re using. Although, a possible reason for the problem might be the source you’re setting to the “gen_user_Mncpio” jqxDropDownList in the “gen_user_Dprtmnto” event handler doesn’t contain the value you’re selecting in the ajax.success function and that’s why “$(“#gen_user_Mncpio”).jqxDropDownList(‘selectItem’,data[0].gen_user_Mncpio);” is not selecting anything.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[juanellisParticipant]

Thank you. I Will check it

[juanellisParticipant]

Thanks again for the spot, the solution was very simple, just by using the “bindingComplete” event. It’s working like a charm.

[Author]

Posts