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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • aeroniva
    Participant

    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!
    Tnx


    Vladimir
    Participant

    Hello 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,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.