0

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 . 

    <script type="text/javascript">
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});

$('#form').submit(function(){

$('#report-box').load('?action=Q',$(this).serialize(),function(){
$("#report").jqGrid('navGrid','#report-box',{ edit:false,add:false,del:false });
});

return false;
});
});
    </script>
  </div>
</div>
<table id="report"></table>
<div id="report-box"></div>

the request page code 

<script type="text/javascript">
  jQuery("#report").jqGrid({ 
  url:'?action=b&tpl=bydept&date={$date}',
  datatype: "json",
  colNames:['xx','xx','xxx','xxx','xxx','xxx','xxx','xx','xxx','xxx'],
  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',
  sortname: 'dept',
  viewrecords: true,
  sortorder: "desc",
  caption:"xxxx"
  });

</script>

=======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.

<form action='{$kbonez_root}report/action/q/' method='post' id='form'>
  <table width="100%" border="0">
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
    <tr>
      <th>Date</th>
      <td><input name="date" class="txt datepicker" type="text" value="2011-04-6" /></td>
      <td><span class="font_c2">* not null</span></td>
    </tr>
    <tr>
      <th>report type</th>
      <td>
        <select name="tpl">
          <option value='bydept'>department report</option>
          <option value='byidc'>idc report</option>
          <option value='bycenter'>center report</option>
          <option value='bybrand'>rand report</option>
        </select>
      </td>
    </tr>
  </table>
  <p class="btn"><span><button type='submit'>Submit</button></span></p>
</form>

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';
    }
});
9nix00
  • 3,852
  • 2
  • 21
  • 27

2 Answers2

1

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 <table id="report"></table><div id="report-box"></div> 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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oleg,I understand your mean, thanks your explain. and I will try it . Let me explain why load jqGrid some times before. I am appending it in my post. – 9nix00 Apr 13 '11 at 09:58
  • @9nix00: I updated my answer based on the last information from your question. – Oleg Apr 13 '11 at 11:30
  • thanks a lot !!! :D I will coding it. when I finish it, I will post it at here. hope can help other people. I set button type to type='submit' because I have a "crazy" idea. I want to make a feature that can make javascript and disable-javascript user both can use the site... lol.... Am I crazy ??? – 9nix00 Apr 13 '11 at 11:51
  • @9nix00: You are welcome! I think that now one JavaScript should be supported everywhere. – Oleg Apr 13 '11 at 11:55
  • hi,I finished it. and paste this code, I think it is simple enough. – 9nix00 Apr 14 '11 at 13:30
  • @9nix00: I am glag to hear this! I the code which you publish two thing seems me not so good: the usage of functions for the `sortname` and `the capture`. The columns of your grig are all sortable, so after the user click on the column header the `sortname` will be overwritten. You can fix the problem including `sortable:false` in column. If you want change the sort paremeter **before** the request are sent to the server you can use `beforeRequest` or `serializeGridData` events. If you need do someting after the response from the server are processed the `loadComplete` will be the best choice. – Oleg Apr 14 '11 at 13:53
0

Try loading the script with getScript instead( http://api.jquery.com/jQuery.getScript/ )

Variant
  • 17,279
  • 4
  • 40
  • 65