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_Related Related Topics sp_TopicIcon
Bug when reload the grid
28/05/2013
12:53
Avatar
oeil_de_nuit59
New Member
Members
Forum Posts: 1
Member Since:
28/05/2013
sp_UserOfflineSmall Offline

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 ?

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
25 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