oeil_de_nuit59 on Bug when reload the grid

Tue, 28 May 2013 12:53:33 +0300

Good morning everybody,

I'm developing a project with a lot of jqgrid using jquery 1.10.0 , jquery ui 1.10.3 and jqgrid 4.5.2.

My problem is that, just for one grid (others work) I can't refresh json data.

This grid is refreshed when I select a row in another grid. The first time data are correctly loaded but the second time, data are loaded and the display 'loading' stays. Then if I try to refresh the grid another time, there isn't any http request sent.

Drag&drop and sort is also use in this grid.

As you can see in the code below, it's a little bit complicated because I first created the grid with local data ( just for have html DOM created and no request if data are not needed) and then I refresh data with datatype 'json' .

Code which create grid

// grid tab caracteristique
               paramEdit = {
                   optEdit:{
                       recreateForm:true,
                       beforeShowForm:function(){
                           $("#editmodtabCaracTech2 #tr_aliasName").show();
                       },
                       afterShowForm:function(){
                           $.getJSON('interfaceCallback.php?oper=getUsed&interface=app_Equipment_CT_PC&id='+$("#tabCaracTech2").getSelectedID()+'&propTypeID='+$("#editmodtabCaracTech2 #propTypeLabel").val(), function(data){
                               if(data.used == 1){
                                   $("#editmodtabCaracTech2 #propTypeLabel").attr('disabled', true);
                               }else{
                                   $("#editmodtabCaracTech2 #propTypeLabel").attr('disabled', false);
                               }
                           });
                           $("#editmodtabCaracTech2 #eval").click(function(){
                               if($(this).attr('checked')!=null)
                                   $("#editmodtabCaracTech2 #tr_expression").show();
                               else
                                   $("#editmodtabCaracTech2 #tr_expression").hide();
                           });
                           if($("#editmodtabCaracTech2 #eval").attr('checked')!=null)
                               $("#editmodtabCaracTech2 #tr_expression").show();
                       },
                       onAfterSubmit:function(response, postdata){
                           $.getJSON('interfaceCallback.php?oper=getProp&interface=app_Equipment_Tasks_Task&ap_equiptype_id='+$("#listEquipType").getSelectedID().substring(1), function(propCompteur){
                               $("#tabTask2").setColProp("prop",{
                                   name:'prop',
                                   width:20,
                                   editable:true,
                                   edittype:"select",
                                   editoptions:{
                                       value:propCompteur.propC
                                   },
                                   hidden:true
                               });
                               $("#tabTask2").setColProp("propDT",{
                                   name:'propDT',
                                   width:20,
                                   editable:true,
                                   edittype:"select",
                                   editoptions:{
                                       value:propCompteur.propDT
                                   },
                                   hidden:true
                               });
                               $("#tabTask2").setColProp("propL",{
                                   name:'propL',
                                   width:20,
                                   editable:true,
                                   edittype:"select",
                                   editoptions:{
                                       value:propCompteur.propL
                                   },
                                   hidden:true
                               });
                           });
                           if(response.responseText!='')
                               return eval(response.responseText);
                           if(postdata.propTypeLabel!=0){
                               createGrid($("div.task #listOnglet .current > a").attr('id')+'_Content');
                               return [true, ''];
                           }else
                               return [false, 'Format de propriété non valide.'];
                       }
                   },
                   optAdd:{
                       recreateForm:true,
                       reloadAfterSubmit:false,
                       beforeShowForm:function(){
                           $("#editmodtabCaracTech2 #tr_aliasName").show();
                       },
                       onAfterSubmit:function(response, postdata){
                           $.getJSON('interfaceCallback.php?oper=getProp&interface=app_Equipment_Tasks_Task&ap_equiptype_id='+$("#listEquipType").getSelectedID().substring(1), function(propCompteur){
                               $("#tabTask2").setColProp("prop",{
                                   name:'prop',
                                   width:20,
                                   editable:true,
                                   edittype:"select",
                                   editoptions:{
                                       value:propCompteur.propC
                                   },
                                   hidden:true
                               });
                               $("#tabTask2").setColProp("propDT",{
                                   name:'propDT',
                                   width:20,
                                   editable:true,
                                   edittype:"select",
                                   editoptions:{
                                       value:propCompteur.propDT
                                   },
                                   hidden:true
                               });
                               $("#tabTask2").setColProp("propL",{
                                   name:'propL',
                                   width:20,
                                   editable:true,
                                   edittype:"select",
                                   editoptions:{
                                       value:propCompteur.propL
                                   },
                                   hidden:true
                               });
                           });
                           if(postdata.propTypeLabel==0)
                               return [false, 'Format de propriété non valide.'];
                           else
                               return [true, ''];
                       },
                       afterShowForm:function(){
                           $("#editmodtabCaracTech2 #propTypeLabel").attr('disabled', false);
                           $("#editmodtabCaracTech2 #eval").click(function(){
                               if($(this).attr('checked')!=null)
                                   $("#editmodtabCaracTech2 #tr_expression").show();
                               else
                                   $("#editmodtabCaracTech2 #tr_expression").hide();
                           });
                       }
                   },
                   optDel:{
                       onAfterSubmit:function(response){
                           var result = eval(response.responseText);
                           if(result[0]){
                               $.getJSON('interfaceCallback.php?oper=getProp&interface=app_Equipment_Tasks_Task&ap_equiptype_id='+$("#listEquipType").getSelectedID().substring(1), function(propCompteur){
                                   $("#tabTask2").setColProp("prop",{
                                       name:'prop',
                                       width:20,
                                       editable:true,
                                       edittype:"select",
                                       editoptions:{
                                           value:propCompteur.propC
                                       },
                                       hidden:true
                                   });
                                   $("#tabTask2").setColProp("propDT",{
                                       name:'propDT',
                                       width:20,
                                       editable:true,
                                       edittype:"select",
                                       editoptions:{
                                           value:propCompteur.propDT
                                       },
                                       hidden:true
                                   });
                                   $("#tabTask2").setColProp("propL",{
                                       name:'propL',
                                       width:20,
                                       editable:true,
                                       edittype:"select",
                                       editoptions:{
                                           value:propCompteur.propL
                                       },
                                       hidden:true
                                   });
                               });
                               createGrid($("div.task #listOnglet .current > a").attr('id')+'_Content');
                               return [true, ''];
                           }else
                               return result;
                       }
                   }
               };
               $("#tabCaracTech2").jqGridIIT({
                    datatype : 'local',
                   fctEditParam:paramEdit,
                   fctSearch:false,
                   colNames:['Libellé', 'Format', 'Unité', 'Expr.', '', 'Alias'],
                   colModel:[    {
                       name:'label',
                       width:220,
                       editable:true,
                       sortable:false
                   },{
                       name:'propTypeLabel',
                       width:120,
                       editable:true,
                       edittype:"select",
                       editrules:{
                           required:true
                       },
                       sortable:false,
                       //editoptions:data
                   },{
                       name:'unit',
                       width:70,
                       editable:true,
                       sortable:false
                   },{
                       name:'eval',
                       width:40,
                       editable:true,
                       sortable:false,
                       align:"center",
                       formatter:"checkbox",
                       edittype:"checkbox",
                       editoptions: {
                           value:"2:0"
                       }
                   },{
                       name:'expression',
                       width:70,
                       editable:true,
                       sortable:false,
                       hidden:true
                   },{
                       name:'aliasName',
                       width:70,
                       editable:true,
                       hidden:true
                   }],
                   sortname: '',
                   caption:"",
                   rowNum:-1,
                   height:666,
                   initWidth:501,
                   toolbar: [true,"top"],
                   gridComplete:function(){
                       $("#tabCaracTech2").addFCT({
                           methode:'sortProp',
                           fct:function(){
                               if($("#t_tabCaracTech2").html()==''){
                                   $("#t_tabCaracTech2").html('Mode : <input id="select" type="radio" name="mode" value="0" CHECKED><label for="select">Sélection</label><input id="tri" type="radio" name="mode" value="1"><label for="tri">Tri</label>');
                                   $("#gbox_tabCaracTech2 input[name=mode]").click(function(){
                                       if($(this).attr('value')=="1"){
                                           $("#tabCaracTech2 tr").draggable({
                                               disabled: true
                                           });
                                           $("#tabCaracTech2").sortableRows({
                                               disabled: false
                                           });
                                       }else{
                                           $("#tabCaracTech2 tr").draggable({
                                               disabled: false
                                           });
                                           $("#tabCaracTech2").sortableRows({
                                               disabled: true
                                           });
                                       }
                                   });
                               }
                               if($("#gbox_tabCaracTech2 input[name=mode]:checked").val()!="0"){
                                   $("#tabCaracTech2 tr").draggable({
                                       disabled: true
                                   });
                                   $("#tabCaracTech2").sortableRows({
                                       disabled: false
                                   });
                               }else{
                                   $("#tabCaracTech2 tr").draggable({
                                       disabled: false
                                   });
                                   $("#tabCaracTech2").sortableRows({
                                       disabled: true
                                   });
                               }
                           }
                       });
                   },
                   selectRow:function(id){
                       if(id.split('_')[0]=='G'){
                           $("#gbox_tabCaracTech2 .ui-icon-pencil").parent().parent().hide();
                           $("#gbox_tabCaracTech2 .ui-icon-trash").parent().parent().hide();
                       }
                       if(id.split('_')[0]=='T')
                           $("#gbox_tabCaracTech2 .ui-icon-trash").parent().parent().hide();
                   }
               });
               $("#tabCaracTech2").addFCT({
                   methode:'sortProp',
                   fct:function(){
                       $("#tabCaracTech2").jqGrid('sortableRows',{
                           disabled: true,
                           stop:function(event, ui){
                               var order = $(this).sortable('toArray').toString();
                               $.get("interfaceCallback.php?oper=sortProp&interface=app_Equipment_CT_PC&param=" + order);
                               $("#tabCaracTech2").jqGridAlterneClassRowIIT();
                           }
                       }).jqGrid('gridDnD',
                       {
                           connectWith: "#tabPropSelected2, #tabInfosEquip2",
                           droppos:"last",
                           dropbyname:true,
                           drag_opts:{
                               stop:null,
                               zIndex: 100,
                               revert:true,
                               helper:function(event){
                                   if($("#dragger").length===0)
                                       $('body').append('<div style="position : absolute ;" class="dragger ui-widget-header"></div>');
                                   var lab;
                                   if($(event.currentTarget).find('td:first').text().length>50)
                                       lab = $(event.currentTarget).find('td:first').text().substr(0, 50) + ' …';
                                   else
                                       lab = $(event.currentTarget).find('td:first').text();
                                   $(".dragger").text(lab);
                                   $(".dragger").attr('id', $(event.currentTarget).attr('id').split('_')[0]=='G' || $(event.currentTarget).attr('id').split('_')[0]=='T'?$(event.currentTarget).attr('id').split('_')[1]:$(event.currentTarget).attr('id'));
                                   return $(".dragger");
                               },
                               cursorAt:{
                                   bottom:0,
                                   left:20
                               }
                           },
                           ondrop:function(event, ui){
                               dropPropEquipment($(this), ui);
                           }
                       });
                   }
               });

Code which refresh grid:

$("#tabCaracTech2").jqGridRefreshIIT({
       datatype : 'json',
       parameter:'&ap_equiptype_id='+$("#listEquipType").getSelectedID().substring(1),
       page:1,
       editurl : callback + "?interface=" + inter + "&ap_equiptype_id="     +$("#listEquipType").getSelectedID().substring(1)
                               });

Code for the function jqGridRefreshIIT

$.fn.jqGridRefreshIIT = function(opt) {
       var settings = $.extend({
           inter: $(this).getGridParam('inter'),
           parameter: $(this).getGridParam('parameter'),
           callback: $(this).getGridParam('callback'),
           url: (opt.callback != null ? opt.callback : $(this).getGridParam('callback')) + '?oper=load&interface=' + (opt.inter != null ? opt.inter : $(this).getGridParam('inter')) + (opt.parameter != null ? opt.parameter : $(this).getGridParam('parameter'))
       }, opt)

$(this).setGridParam(settings).jqGridSetCaptionIIT();

       if ($(this).getGridParam('fctPrint')) {
           $(this).jqGridSetFileNameIIT();
       }
       if ($(this).getGridParam('fctExport')) {
           $(this).jqGridSetFileNameIIT();
           $(this).jqGridExportIIT({});
       }
       if ($(this).getGridParam('fctPDF')) {
           $(this).jqGridSetFileNameIIT();
       }
       $(this).trigger('reloadGrid');
       return $(this);
   }

As you can see, parameter callback and inter are use to create the url .

Thanks, oeil_de_nuit59

ps : sorry for my english, I'm a french teenager.

EDIT : after some search, I've found that the problem doesn't come from the refresh but from the resize of the grid. In fact, after a resize, I can't refresh my grid. If I try to refresh it, the grid stay with the display 'loading'

In order to resize my grid with the parent's size, I use this function:

$.fn.jqGridResizeAll = function() {

       selected = this;
       if (this.parent().parent().parent().parent().parent().children('div[id*=period]').length !== 0)
           externe = 27;
       else
           externe = 0;
       selected.setGridWidth(selected.parent().parent().parent().parent().parent().width() – 2); // on lui met la taille de son parent en largeur
       // on récupère la différence de taille entre son parent et sa taille actuelle
       height = selected.parent().parent().parent().parent().outerHeight() – selected.parent().parent().height();
       // on lui met la taille de son parent moins la difference
       selected.setGridHeight(selected.parent().parent().parent().parent().parent().height() – (height + externe));
   };

And I used it with thoses lines :

$('#tabCaracTech2').jqGridResizeAll()

Is there any mistake in my code ?

jQuery Grid Plugin - jqGrid - Topic: Bug when reload the grid

oeil_de_nuit59 on Bug when reload the grid