jQuery Grid Plugin - jqGrid

Hello,

I've got a grid and a subgrid, in which there are 2 Selects. When I select a row of the subgrid it enters in edit mode as I want, but while I can populate the 1st select (HID_CDC_id) because doesn't have dependencies, I can't manage to populate the 2nd (HID_ACT_id) which depends on the 1st value selected: what appens is that, when I select a row, sometimes both the Selects are properly populated, while sometimes the 2nd remains empty, and I can't understand the scenario which produces this different behavior.

I've tried mostly everything and I noticed that if I put an Alert before setting the html code of the 2nd Select everything works fine and that's another thing that complicate even more the situation for my understanding.

 

Here's the code... hope someone can help 

jQuery("#sg3").jqGrid({
  url:'server.php?q=1',
  datatype: "xml",
  height: 511,
  width: 780,
  colNames:['ID','Date', 'Notes'],
  colModel:[
    {name:'HIH_ownid',index:'HIH_ownid', width:55, hidden: true, key:true},
    {name:'HIH_date',index:'HIH_date', width:90, editable:true},
    {name:'HIH_notes',index:'HIH_notes', width:100, editable:true}

  ],
  editurl: "edit_history_h.php",
  rowNum:8,
  rowList:[8,10,20,30],
  pager: '#psg3',
  sortname: 'HIH_date',
  viewrecords: true,
  sortorder: "desc",
  scrollOffset: 0, 
  multiselect: false,
  subGrid: true,

  onSelectRow: function (rowId) {

    var rowIds = $("#sg3").getDataIDs();
    $.each(rowIds, function (index, id) {
      if(id != rowId) $("#sg3").jqGrid ('collapseSubGridRow', id);
    });

    if(rowId && rowId !== lastsel) {
      jQuery('#sg3').jqGrid('restoreRow', lastsel);
      jQuery('#sg3').jqGrid('editRow', rowId, true);
      lastsel = rowId;
    }

  },

  subGridOptions: {
    "plusicon" : "ui-icon-triangle-1-e",
    "minusicon" : "ui-icon-triangle-1-s",
    "openicon" : "ui-icon-arrowreturn-1-e",

    "reloadOnExpand" : false,

    "selectOnExpand" : true
  },
  subGridRowExpanded: function(subgrid_id, row_id) {
    var subgrid_table_id, pager_id;
    subgrid_table_id = subgrid_id + "_t";
    pager_id = "p_" + subgrid_table_id;
    $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "'              class='scroll'></div>");
  jQuery("#" + subgrid_table_id).jqGrid({
    url:"subgrid.php?q=2&id=" + row_id,
    datatype: "xml",
    width: 753,
    colNames: ['ID','Cdc','Activity','Hours'],
    colModel: [
      {name:"HID_ownid", index:"HID_ownid", width:80, hidden: true, key:true},

      {name:"HID_CDC_id", index:"HID_CDC_id", width:80, sortable: true, editable:true, edittype: "select", editrules: { required:       true }, editoptions: {dataUrl:'cdc_get1.php', dataEvents:
        [
          {
            type: 'change',
            fn: function(e) {

              $.get('activity_get3.php?id=' + $(this).val(), function(data) {
                var res = $(data).html();
                var select_id = "#" + jQuery("#" + subgrid_table_id).jqGrid('getGridParam', 'selrow') + "_HID_ACT_id";

                $(select_id).html(res);

            });

           }
        }
      ]},
      },

      {name:"HID_ACT_id", index:"HID_ACT_id", width:70, sortable: true, editable:true, edittype: "select", editrules: { required:       true } , editoptions:{dataUrl:'activity_get1.php?id=0'}},
      {name:"HID_hours", index:"HID_hours", width:70, editable:true}

       ],
       editurl: "edit_history_d.php",
       rowNum:20,
       pager: pager_id,
       scrollOffset: 0,
       sortname: 'HID_CDC_id',
       sortorder: "asc",
       height: '100%',

       onSelectRow: function (rowId) {

         if(rowId && rowId !== lastsel_sub)
         {
           jQuery("#" + subgrid_table_id).jqGrid('restoreRow', lastsel_sub);
           jQuery("#" + subgrid_table_id).jqGrid('editRow', rowId, true);

           $.get('activity_get1.php?id=' + rowId, function(data) {

             var res = $(data).html();

             var select_id = "#" + rowId + "_HID_ACT_id";

            //alert(res);

            $(select_id).html(res);

          });

          lastsel_sub = rowId;
        }
      }
   });
   jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, {edit:false, add:false, del:false});

   jQuery("#" + subgrid_table_id).jqGrid('inlineNav', "#" + pager_id);
  }
});
jQuery("#sg3").jqGrid('navGrid', '#psg3', {add:false, edit:false, del:false});

jQuery("#sg3").jqGrid('inlineNav', "#psg3");

 

EDIT:

replacing the row $(select_id).html(res); with document.getElementById(rowId + '_HID_ACT_id').innerHTML = res; firebug gives me the error:

document.getElementById(rowId+'_HID_ACT_id').innerHTML = res;

 

This explains the problem, but not why sometimes the pointed element exists and sometimes not.

So I still don't know how to solve the problem.