title: JQuery FlexiGrid with Struts2
body: <p><strong>Hi can any one tell me whats wrong with the following code...</strong></p>
  
  <p>i have configured the Flexigrid in php it is working fine but when i tried it in Struts 2 application it doest display any thing and the loading icon continuously asking to wait...
  I m totally unable to display the data in the Flexigrid... i tried a alot but could not get any proper solution... 
  But i can see the JSON returned by the server in FireBug i mean the following json response is visible in FireBug but not in FlexiGrid
  ...Following is my code... plz take a look at the code and point out my mistake... THANKS ALOT</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="/candidtrack/web/theme/css/flexigrid/flexigrid.css"/&gt;
      &lt;script type="text/javascript" src="/candidtrack/web/theme/lib/jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/candidtrack/web/theme/lib/flexigrid.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $("#flex1").flexigrid
              (
              {
                  url: '/candidtrack/web/requirement/requirement!gridInJson',
                                     dataType: 'json',
                  colModel : [
                      {display: 'reqId', name : 'reqId', width : 40, sortable : true, align: 'left'},
                      {display: 'reqTitle', name : 'reqTitle', width : 90, sortable : true, align: 'left'},
                      {display: 'Job Type', name : 'Job Type', width : 90, sortable : true, align: 'left'},
                      {display: 'Company', name : 'Company', width : 90, sortable : true, align: 'left'},
                      {display: 'Contact Person', name : 'Contact Person', width : 90, sortable : true, align: 'left'},
                      {display: 'Location', name : 'Location', width : 90, sortable : true, align: 'left'},
                      {display: 'Submission End Date', name : 'Submission End Date', width : 90, sortable : true, align: 'left'},
                      {display: 'Career Level', name : 'Career Level', width : 90, sortable : true, align: 'left'},
                      {display: 'Required Skills', name : 'Required Skills', width : 100, sortable : true, align: 'left'},
                      {display: 'Education Level', name : 'Education Level', width : 90, sortable : true, align: 'left'},
                      {display: 'Residence Status', name : 'Residence Status', width : 95, sortable : true, align: 'left'},
                      {display: 'Bill Rate', name : 'Bill Rate', width : 35, sortable : true, align: 'right'},
                      {display: 'Status', name : 'Status', width : 45, sortable : true, align: 'left'},
                                              {display: 'Action', name : 'Action', width : 35, sortable : true, align: 'center'}
                  ],
                  buttons : [
                      {separator: true},
                      {name: 'A', onpress: sortAlpha},
                      {name: 'B', onpress: sortAlpha},
                      {name: 'C', onpress: sortAlpha},
                      {name: 'D', onpress: sortAlpha},
                      {name: 'E', onpress: sortAlpha},
                      {name: 'F', onpress: sortAlpha},
                      {name: 'G', onpress: sortAlpha},
                      {name: 'H', onpress: sortAlpha},
                      {name: 'I', onpress: sortAlpha},
                      {name: 'J', onpress: sortAlpha},
                      {name: 'K', onpress: sortAlpha},
                      {name: 'L', onpress: sortAlpha},
                      {name: 'M', onpress: sortAlpha},
                      {name: 'N', onpress: sortAlpha},
                      {name: 'O', onpress: sortAlpha},
                      {name: 'P', onpress: sortAlpha},
                      {name: 'Q', onpress: sortAlpha},
                      {name: 'R', onpress: sortAlpha},
                      {name: 'S', onpress: sortAlpha},
                      {name: 'T', onpress: sortAlpha},
                      {name: 'U', onpress: sortAlpha},
                      {name: 'V', onpress: sortAlpha},
                      {name: 'W', onpress: sortAlpha},
                      {name: 'X', onpress: sortAlpha},
                      {name: 'Y', onpress: sortAlpha},
                      {name: 'Z', onpress: sortAlpha},
                      {name: '#', onpress: sortAlpha}
                  ],
                  searchitems : [
                      {display: 'reqId', name : 'reqId'},
                      //                                {display: 'Name', name : 'name', isdefault: true}
                  ],
                  sortname: "reqId",
                  sortorder: "asc",
                  usepager: true,
                  useRp: true,
                  rp: 10,
                  showTableToggleBtn: true,
                  width: 988,
                  height: 400
              }
          );
  
  
          });
          function sortAlpha(com)
          {
  
  
              jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
              jQuery("#flex1").flexReload();
  
  
  
          }
  
          function test(com,grid)
          {
              if (com=='Delete')
              {
                  if($('.trSelected',grid).length&gt;0){
                      if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
                          var items = $('.trSelected',grid);
                          var itemlist ='';
                          for(i=0;i&lt;items.length;i++){
                              itemlist+= items[i].id.substr(3)+",";
                          }
                          $.ajax({
                              type: "POST",
                              dataType: "json",
                              url: "/candidtrack/web/requirement/requirement!gridInJson",
                              data: "items="+itemlist,
                              success: function(data){
                                  alert("Query: "+data.query+" - Total affected rows: "+data.total);
                                  $("#flex1").flexReload();
                              }
                          });
                      }
                  } else {
                      return false;
                  }
              }
              else if (com=='Add')
              {
                  alert('Add New Item Action');
  
              }
          }
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body &gt;
  
                  &lt;table align="center" id="flex1"&gt;
  
                  &lt;/table&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the JSON which is returned by server that is displayed on FireBug but could not in the Flexigrid. is::</p>
  
  <pre><code>{
  page:1 ,
  total: 9,
  rows: [
  {reqId:'1',cell:['1','Title Req1111','Job-ContractToHire','Company 2','Frist Name  mid Last','Location 2','2010-12-12','Career Level 2','Dot NetJava','Bachelor','TN Visa','1/Y']},
  {reqId:'2',cell:['2','title ','Job-ContractToHire','Company 2','Salman 8 ItsMe','Location 2','2010-12-01','Career Level 1','Dot Net','','Green Card','234/H']},
  {reqId:'3',cell:['3','t','Job-ContractToHire','Company 2','f m l','Location 3','2011-01-29','Career Level 1','','','Citizen','23/H']},
  {reqId:'4',cell:['4','t','Job-ContractToHire','Company 2','f m l','Locaion 1','2011-01-11','Career Level 2','','','Green Card','23/H']},
  {reqId:'5',cell:['5','t','Job-ContractToHire','Company 2','f m l','Locaion 1','2011-01-11','Career Level 2','','Bachelor','Green Card','23/H']},
  {reqId:'7',cell:['7','t','Job-FullTime','comp4','  ','Location 2','2011-03-17','Career Level 2','Any Skill','Bachelor','Green Card','3/H']},
  {reqId:'8',cell:['8','tt','Job-Contract','comp4','  ','Location 2','2011-03-23','Career Level 2','Dot Net','','Citizen','3/H']},
  {reqId:'9',cell:['9','tt','Job-Contract','comp4','  ','Location 2','2011-03-23','Career Level 2','Dot Net','','Citizen','3/H']},
  {reqId:'10',cell:['10','uuu','Job-Contract','comp4','  ','Location 2','2011-03-18','Career Level 1','Java','Bachelor','Citizen','12/H']}]
  }
  </code></pre>
  
  <p>Thanks in Advance</p>