Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Dynamically populate Select in a Subgrid sometimes doesn't work
09/08/2014
23:57
Avatar
N@Z
Member
Members
Forum Posts: 4
Member Since:
09/08/2014
sp_UserOfflineSmall Offline

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:

TypeError: document.getElementById(...) is null
 
 
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. 

18/08/2014
11:01
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

 

There is a example in our commercial PHP component.

I think you should get the point.

Here is the example

 

Kind Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

21/08/2014
02:22
Avatar
N@Z
Member
Members
Forum Posts: 4
Member Since:
09/08/2014
sp_UserOfflineSmall Offline

First of all thanks for your reply.

I read the code of the demo 10 times and tried to change many things in my code but I couldn't get the solution... I didn't get the point unfortunately.

I think the problem is the inline editing because ad I can see in the demo if I used the "form" edit mode i'd be able to make the trick.

I tried mostly everything but in any case SOMETIMES the code doesn't reach the desired SELECT. (like 10% of times i click on a row to enter in edit mode the 2nd SELECT remains empty)

I tried:

jQuery("#" + rowId + '_HID_ACT_id').html("");
jQuery("#" + rowId + '_HID_ACT_id').html(res);

or

$("#" + rowId + '_HID_ACT_id').html(res);

or

//this 10% of times i click gives me the error i posted above

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

or even

$("#" + subgrid_table_id).setColProp('HID_ACT_id', { editoptions: { value: data} });

or even

setInterval(function() {$(select_id).html(res);}, 100);

 

nothing solved the problem.

 

please, help me becuse i'm stuck.

 

PS. I even tried to remove the EDITOPTION from the column HID_ACT_id and populate it programmatically in the OnSelectRow event, but I can't because without that part the SELECT doesn't have an ID and therefore i cannot reach it.

21/08/2014
03:00
Avatar
N@Z
Member
Members
Forum Posts: 4
Member Since:
09/08/2014
sp_UserOfflineSmall Offline

OK, it seems i solved the problem.

in case it halps someone else:

1) in teh file activity_get1.php I added the code that checks if id==0 and in that case i print an empty SELECT

if($id == 0)
{
echo "<select><option></option></select>";
}

 

2) in the event onSelectRow, before placing the row in edit mode, I added the following code:

$("#" + subgrid_table_id).setColProp('HID_ACT_id', { editoptions: { dataUrl:'activity_get1.php?id=' + rowId }});

so in the file activity_get1.php I can retrieve the value of the column HID_CDC_id saved in the database (this because i don't care about the changes of that SELECT because they are already managed in the relative part of code)

 

3)then i removed all the other parts of code that worked with the select HID_ACT_id in particular i removed all the following code:

 $.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);

          });

 

anyway thanks for the support tony! great plugin!!!

21/08/2014
17:17
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

 

Thanks for the feedback and posting your solution.

 

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 496

Currently Online:
31 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information