Question

the folloing is a snippet of code I am using to create a jqGrid –

$("#list").jqGrid({
    url:'products.php?storeId=<?php echo $_SESSION["valid_store"]; ?>',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Product Id','Product Description','Department','Category','Price','Sale Price','Quantity','Extended Description','Image'],
    colModel :[ 
      {name:'ProductId', index:'ProductId', width:20}, 
      {name:'product_name', index:'product_name', width:50, editable:true, edittype:'text', search:true, stype:'text'},
      {name:'DepartmentName', index:'DepartmentName', width:40,sortable: false, editable: true, edittype: "select"},
      {name:'CategoryName', index:'CategoryName', width:40,sortable:false, editable:true, edittype:'select'},

I am populating the the “DepartmentName” dynamically when the grid has loaded using the following –

var departments = $.ajax({
        url: "get_departments.php?storeId=<?php echo $_SESSION["valid_store"]; ?>",
        async: false,
        success:function(data, result){
            if(!result){
                alert("Failure to retrieve the Departments");
            }
        }

loadComplete:function(){
        $("#list").setColProp('DepartmentName', { editoptions: { value: departments} });
    },

Baslically I am assigning a large number of “Departments” into a JSON format, when the grid has loaded then the “DepartmentName” is populated with all these departments. This all works fine.

What I am having difficulty doing/understanding. Is now that I have these values, depending on which “Department” I choose from the Select, is populating the “CategoryName” with only “Categories” that are referenced by said “Department” the relationship between the data is already setup in MySQL

Thanks

Answer 1

Use another ajax function. Just send off the value of the select list and grab the sql values associated with that selected value. Then return that and display only those options in the next SELECT item. Something like this:

$.ajax({
   url:blah.html,
   data:{'something':'your select value'},
   success:function(data){$('#yourNextSelectItem').html(data)}
});