jQuery Grid Plugin - jqGrid

Hi,

I am new to jqGrid and need help.

I am using the latest 4.4.1 version of jqGrid and Coldfusion 9. My grid so far works as intended however, I am stuck with couple of issues.

1. This is more important issue. Every time I click on Add button to bring add form I must pass one hidden variable "provider_id" taken from drop down box to processing function.

Also, there is a default set in one of the fields for current year that pre-populates Year text box in the add form.

The issue is, when I call add form first time, it works great and I can add new record. Second time when I call add form, that hidden variable is gone and current year does not show too. Also, if I call edit form and update something or, just close it, after that add form behaves the same and does not retain that hidden variable or, pre-populates current year. I can call "edit form" as many times and it works fine.

Bottom line, "add form" loads hidden variable "provider_id" and pre-populates current year only first initial time I call it.

2. My grid is located in function loadGrid() and called every time parameters change in one of the 3 drop down boxes. The grid is generated just fine when I call it first time from onchange event but, nothing happens when I change second time. I added $("#list").jqGrid('GridUnload'); line and, it takes care of it, grid reloads just fine but, I feel this is not correct method to refresh the grid. Also, if I initialize it var grid = $("#list"); it does not refresh either.

Here is the code:

=============================================================================

 <script type="text/javascript">
 jQuery(document).ready(function(){
  $('#provider_id').change(function(){
   var prID = $('#provider_id').val();
   var mn = $('#month').val();
   var yr = $('#year').val();
   
   loadGrid(prID,mn,yr);
  });
  
  $('#month').change(function(){
   var prID = $('#provider_id').val();
   var mn = $('#month').val();
   var yr = $('#year').val();
   
   loadGrid(prID,mn,yr);
  });
  
  $('#year').change(function(){
   var prID = $('#provider_id').val();
   var mn = $('#month').val();
   var yr = $('#year').val();
   
   loadGrid(prID,mn,yr);
  });
  
  function loadGrid(prID,mn,yr){
   //var grid = $("#list");
   //$.jgrid.formatter.integer.thousandsSeparator = ',';
         //$.jgrid.formatter.number.thousandsSeparator = ',';
         //$.jgrid.formatter.currency.thousandsSeparator = ',';
   
   //$myGrid = $("#list"),
            //selRowData = null;
   
   var arrMonths = {'1':'January','2':'February','3':'March','4':'April','5':'May','6':'June','7':'July','8':'August','9':'September','10':'October','11':'November','12':'December'};
   var arrStatus = {'B':'Billed','P':'Paid'};
   var currentTime = new Date()
   var currYear = currentTime.getFullYear()
   
   $("#list").jqGrid('GridUnload');  // reload grid
   $("#list").jqGrid(
   {
    url:'../components/accnt/accnttrx.cfc?method=GetTranactions&prID=' + prID + '&mn=' + mn + '&yr=' + yr, //CFC that will return the users
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['Trx ID','Cheque No','Amount', 'Debit','Credit', 'Month', 'Year', 'Status','Added by Employee','trx_employee_id','sponsor_id','division_id','plan_id','provider_id'], //Column Names
    //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
    colModel :[
     {name:'accttrx_id',index:'accttrx_id', width:75, sorttype:"int",editable:true,searchoptions:{sopt:['eq','lt','le','gt','ge']}},
     {name:'cheque_no',index:'cheque_no', width:150, sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     //formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'
     {name:'cheque_amt',index:'cheque_amt', width:150, align:"right",formatter: 'number',sorttype:"number",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'debit',index:'debit', width:150, align:"right",formatter:'number',sorttype:"number",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'credit',index:'credit', width:150, align:"right",formatter:'number',sorttype:"number",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'accttrx_month',index:'accttrx_month', width:150,align:"left",sorttype:"int",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:true,formatter: 'select',edittype:"select",editoptions:{value:arrMonths},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'accttrx_year',index:'accttrx_year', width:40,align:"left",sorttype:"int",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:true,edittype:"text",editoptions:{value:currYear,size:30},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'accttrx_status',index:'accttrx_status', width:150,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},formatter: 'select',editable:true,edittype:"select",editoptions:{value:arrStatus},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'ee_name',index:'ee_name', width:150,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']}, editable:false,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
     {name:'trx_employee_id', editable:true, hidden:true},
     {name:'sponsor_id', editable:true, hidden:true},
     {name:'division_id', editable:true, hidden:true},
     {name:'plan_id', editable:true, hidden:true},
     {name:'provider_id',editoptions:{value:$('#provider_id').val()}, editable:true, hidden:true}
    ], // hidden variable used in add form to add new record

//searchoptions parameter is used to limit the operators available during search
    pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
    rowNum:20, //Number of records we want to show per page
    rowList:[20,30,40,50], //Row List, to allow user to select how many rows they want to see per page
    sortorder: "asc", //Default sort order
    ondblClickRow: function (rowid, iRow, iCol, e) {
                    alert(rowid); // to populate with logs
                },
    sortname: "accttrx_id", //Default sort column
    viewrecords: true, //Shows the nice message on the pager
    //imgpath: '/Test/themes/basic/images', //Image path for prev/next etc images
    caption: 'Transactions', //Grid Name
    recordtext: "Record {0} – {1} of {2}",//Pager information to show
    rownumbers: false,//Show row numbers
    rownumWidth: "30″,//Width of the row numbers column
    sortable: true,
    height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
    mtype:'POST', 
    toolbar:[true,"top"], //Shows the toolbar at the top. We will use it to display user feedback
    //The JSON reader. This defines what the JSON data returned from the CFC should look like
    jsonReader: {
     root: "ROWS", //our data
                    page: "PAGE", //current page
                    total: "TOTAL", //total pages
                    records:"RECORDS", //total records
     userdata:"USERDATA", //Userdata we will pass back for feedback
     cell: "", //Not Used
     id: "0″ //Will default to first column
     },
    editurl:"../components/accnt/accnttrx.cfc?method=addeditTrx" //The Add/Edit function call, if set to clientArray then no server connection is established
    }    
   ).navGrid('#pager',
    {
     search:true,searchtitle:"Search",//title set for hover over display
     edit:true,edittitle:"Edit Transation",
     add:true,addtitle:"Add Transaction",
     del:true,deltitle:"Delete Transaction"
    },
        
   // Edit Options. savekey parameter will keybind the Enter key to submit.
   {beforeShowForm: function(form) {
     $('#tr_accttrx_id', form).hide();
     $('#tr_trx_employee_id', form).hide();
     $('#sponsor_id', form).hide();
     $('#division_id', form).hide();
     $('#plan_id', form).hide();
    },
    editCaption:"Edit Transaction",edittext:"Edit",closeOnEscape:true, savekey: [true,13],errorTextFormat:commonError,width:"450″,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60″,left:"70″},
   {beforeShowForm: function(form) {
     //var  prID = $('#provider_id').val();
     $('#tr_accttrx_id', form).hide();
     $('#tr_provider_id', form).hide();
    },
    addCaption:"Add Transaction",closeOnEscape:true,savekey: [true,13],errorTextFormat:commonError,width:"450″,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60″,left:"70″}, //Add Options
   {url:"../components/accnt/accnttrx.cfc?method=delUser",caption:"Delete Trancaction",closeOnEscape:true,errorTextFormat:commonError,top:"60″,left:"70″,reloadAfterSubmit:true}, //Delete Options
    //Search Options. multipleSearch parameter lets it know we are going to use the new advanced search feature
   {errorTextFormat:commonError,Find:"Search",closeOnEscape:true,caption:"Search Users",multipleSearch:true,closeAfterSearch:true}
   );
   
   function commonError(data)
   {   
    return "Error Occured during Operation. Please try again";
   } 
  }  
 });
</script>

……………………………….

<tr>
                    <td width="300″><cfoutput>Provider:</td>
                    <td width="400″>
                        <cfselect name="provider_id" bind="cfc:components.accnt.accnttrx.GetProviders(#REQUEST.SESS.lang_id#,#REQUEST.SESS.sup_list#)" display="name" value="provider_id" BindOnLoad="true"></cfselect>
                    </td>
                </tr>

…………………..

Thank you in advance