jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › how to asynronously load data form mysql database to a combobox
This topic contains 1 reply, has 2 voices, and was last updated by Vladimir 9 years, 8 months ago.
-
Author
-
lets say I have a mysql database with tables configured like so
states_table state_id; state_name; city_table city_id city_name state_id
and I’ve use two jqx-comboboxes one for state and another for city in my related html page. what I’m trying to accomplish is when user select a state in the first combobox the second option box asynchronously load all the name of the cities in that state using another script ( get_cities.php) using GET request and in the JSON format. on the other hand the combobox for the cities has a js code like this:
$(document).ready(function () { var source_cities = { datatype: "json", // cache: false, datafields: [ { name : 'city_name'}, { name: 'city_ID'}, ], id: 'cc', url: '../get_cities.php', fetch_cities: function (state_ID) { var data="cc="+state_ID; $.ajax({ type: "GET", dataType: "json", url: "../get_models.php", data: data, success: function(data) { } }); } var dataAdapter = new $.jqx.dataAdapter(source_cities); $('#cities_combo').jqxComboBox({ source: dataAdapter, displayMember: 'city_name' , valueMember: 'city_ID',itemHeight: 38, height: 35, width: 268,placeHolder:"", });
and I have attached a onchange event listener to the first combobox(the one that user choses the state) like so
$('#state_combo').on('change', function (event) { var args = event.args; if (args) { var item = args.item; var val = item.value; $('#cities_combo').jqxComboBox('fetch_cities' , val);
I dont have much of experiance with jquery and ajax and jqxwidgets .Does anyone knows what I’m doing worng and how I’, suppose to do it!
TnxHello aeroniva,
You may want to look at the jqxComboBox demo for Cascading Comboboxes.
It is quite similar to what you want to achieve, so I hope it works for you.
Best Regards,
VladimirjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.