Print Page - Combobox Data Render Issue [Solved]

Title: Combobox Data Render Issue [Solved]
Post by: Darrel on September 17, 2016, 11:02:41 AM

Hello,

I've managed to create a combobox which loads the data using an ajaxCall. The reloado code for the same is as follows: http://code.reloado.com/uzenol3/edit#html,live (http://code.reloado.com/uzenol3/edit#html,live)

However, I'm facing one problem in my code. When the data is loaded in the "states" combobox. I'm not able to see the values of the combobox. However when I hover over the open dropdown panel, the elements get selected but I can only see only see blue lines. This shows that the elements are present in the dropdown however, the data isn't visible. I've highlighted the same in red in the attachment.

What am I doing wrong?? Do I need to give some height or something for the elements as well.

Regards,
Darrel.

Title: Re: Combobox Data Render Issue
Post by: jarry on September 18, 2016, 06:04:04 AM

The combobox requires an array to be loaded. You should convert your string to JSON data before loading it.

Title: Re: Combobox Data Render Issue
Post by: Darrel on September 18, 2016, 07:38:23 AM

Hello jarry,

Thanks for pointing out my mistake. I managed to get the elements in the dropdown. I modified the code as follows:

Code:

$('#country').combobox('textbox').bind('blur', function(e){
	var country = $('#country').combobox('getValue');

	$.getJSON('ajaxAction', {
		countryName : country
	}, function(jsonResponse) {
		$('#ajaxResponse').text(jsonResponse.dummyMsg);

		var dropdown_Data = [];
		var dataStr = "";
		$('#states').combobox({data: []});
		$.each(jsonResponse.stateMap, function(key, value) {
			/* dropdown_Data eg data: {'val':'1','text':'KERALA'},{'val':'2','text':'TAMIL NADU'},{'val':'3','text':'JAMMU KASHMIR'},{'val':'4','text':'ASSAM'},{'val':'5','text':'MAHARASHTRA'},{'val':'6','text':'PUNJAB'} */
			dataStr = "";
			dataStr += "{\'val\':" + "'" + key + "',";
			dataStr += "\'text\':" + "'" + value + "'}";
			dropdown_Data.push(dataStr);
		});

                //Added the following line to parse it to JSON
                dropdown_Data = JSON.parse("[" + dropdown_Data + "]");
					
		console.log("dropdown_Data: " + dropdown_Data);
				
		$('#states').combobox({
			valueField: 'val', textField: 'text',
			data: dropdown_Data
		});
	});
});

Thanks once again!!!!!!!

Regards,
Darrel.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Darrel on September 17, 2016, 11:02:41 AM