jqGrid table called from jQuery.load() issue

Question

all. when I call jqGrid table from jQuery.load(). I found it only works at first time. later called will not work , and the browser-debug not print any error. I only can see , the jqGrid output table lost its search & pager button in bottom.

I called it use this code .

the request page code

=======update to explain why I call jqGrid multi times, thanks Oleg a lot===========

I have a form with some choices, I hope it can : when user select the options, click submit button, server will response it and output a table. the form like this.


  
    
    
    
    
      Date
      
      * not null
    
    
      report type

the design before: when user chose different tpl , submit it , I will output jqGrid-scriptcode and let jqGrid response server again to get the data.

when I see Oleg post, I think I understand your mean,the design before is bad.

I think maybe the below design will be ok,hope you can give suggestion.thanks.

first,  we should output all the different type jqGrid-scriptcode in one page. 
        the choice in the form not too much, so 
              1.I should output it when the page init. use datatype:local
              2.set different arguments for different tpl type.(not sure, I should read jqGrid manual.)
              3.hide them.

second, when user select which type he want use and submit. 
            1.set Corresponding jqGrid table to visiable.
            2.  set current jqGrid datatype json.
            3. use jqGrid to get it data.

real code:

$("#form button").click(function(){

jQuery('#report').jqGrid('GridUnload','#report');

jQuery('#report').jqGrid({
    colNames:['xxx','xx','x','x','x','x','x','x','x','x'],
    colModel:[
    { name:'1',index:'dept', width:55 },
    { name:'2',index:'key_1', width:55  },
    { name:'3',index:'key_2', width:55  },
    { name:'4',index:'key_3', width:55  },
    { name:'5',index:'key_6', width:55  },
    { name:'6',index:'key_8', width:55  },
    { name:'7',index:'key_9', width:55  },
    { name:'8',index:'key_10', width:55  },
    { name:'9',index:'key_13', width:55  },
    { name:'10',index:'key_14', width:55  }

    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#report-box',
    viewrecords: true,
    sortorder: "desc",
    datatype: "json",
    url:'?action=b',
    sortname: function() {
    switch($("#form select option:selected").val()){
    case 'bydept':
        return 'dept';
    case 'byidc':
        return 'idc';
    }
    },
    page:1,
    postData:{
    date: function() { return $("#form input").val(); },
    tpl: function() { return $("#form select option:selected").val(); } 
    }
}).jqGrid('setCaption',function() {
    switch($("#form select option:selected").val()){
    case 'bydept':
            return 'xxx';
    case 'byidc':
            return 'xxx';
    }
});

Oleg · Accepted Answer

Could you explain why you need load the script with the jqGrid with respect of load? It seems to me that there are a better way to use jqGrid.

One problem in you code is in general organization of the work with the grid. You should create jqGrid one time per page and you should call navGrid also only once. The reason is very clear. The jqGrid will create from simple

HTML code fragment a table with the title, columns, pager and so on. Such kind of transformation should be done once. If you don't want to show the grid contain you can place it inside of the hidden div (having style="display:none"). If you don't want to load the grid contain at the initializing time you should sat datatype:'local' at the beginning and no request to the server will be done. In the $('#form').submit handle you can get the data from the form (like you already do with $(this).serialize()), set with respect of setGridParam the datatype:'json' and url (better would be use postData instead of modifying of the url) and call jQuery("#report").trigger("reloadGrid"). This will follow to sending the request to the server. The url will appended with the data from the postData (see here for more informataion) and all will good work.

UPDATED: I agreed with your description of the new design of the page describe in the updated last part of your question. I can add only some possible optimizations.

1) It seems to me that you can use button of type='button' instead of type='submit' and no probably no form is really needed. If you want you can use fieldset instead. Because the form exist now I'll use it below. You can set click handler with the jQuery("#report").trigger("reloadGrid"): $("#form button.btn").click(function(){/*here call reloadGrid*/}).

2) You can use in jqGrid parameter postData about the following

postData: {
    date: function() { return $("#form input").val(); },
    tpl: function() { return $("#form select option:selected").val(); }
}

then at every grid loading will be get automatically the current values from the form

2) I don't know how different are the columns of different grids which you need. So you can for example follow the way of dynamical creating/enabling of columns which I described in this and another answers (see demos). Another more simple way is to use GridUnload method every time if you change the type of the report in the select box. It will destroy the grid and you can recreate it with the new column parameters. See the demo from the another answer.

jqGrid table called from jQuery.load() issue

Answers (2)

Related Questions