my .js file newSP1.js

$(document).ready( function() {
    
    $.ajaxSetup({
    timeout: 10000,
    error: function(xhr, msg, e) {
      showMessage('HTTP error: ' + JSON.stringify(msg) + '.');
    }  
  });    
 
  // Dialog          
  $('#dialog').dialog({
    autoOpen: false,
    buttons: {
      "Ok": function() {
        $(this).dialog("close");
      }
    }
  });
    
    if ($.cookie("SessionID") == null){
        showMessage('Session has expired or does not exist. Please return to log in page.');
    };
 
  //button add
  $( "#btnSupPriceAddnew" ).click(function() {
    $('.supplier').val('');
    $('.wood').val('');
    $('#addSupPriceDesc').val('');
    $('#addSupPrice').val('');  
        $( "#dialogSupPriceAdd" ).dialog( "open" ); 
    });
 
  $( "#dialogSupPriceAdd" ).dialog({
    autoOpen: false,
    resizable: false, 
    modal: true,
    buttons: {    
      "Add Data": function() {
                                alert($('#supplierInput').attr("name")); // this is just to see if the ID (supplier) was correct
                                alert($('#woodInput').attr("name")); // this is just to see if the ID (wood class) was correct
                                alert($('#woodInput').val().length);
    
      var bValid = true;
        bValid = bValid && isEmpty($('#supplierInput'),  'Please choose supplier from Supplier Table.');
        bValid = bValid && isEmpty($('#woodInput'),  'Please choose wood code and description from Wood Table.');
        bValid = bValid && validateDesc($('#addSupPriceDesc'),  'Length of Description must be between 5 and 50.', 5, 50);
        bValid = bValid && validateCode($('#addSupPrice'),  'Please input price.', 1, 10);
      
        if ( bValid ) {
          addSupplierPriceData();
          $( this ).dialog( "close" );
        }
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });
  $( "#supplierGrid" ).click(function() {
    $( "#dialogSupplierTbl" ).html("");
    $( "#dialogSupplierTbl" ).dialog( "open" );
    $( "#dialogSupplierTbl" ).append(
      '<p>Please choose supplier code from Supplier Table.</p>'+
      '<iframe src="supplier.html" width="100%" height="800">' +
        '<p>Your browser does not support iframes.</p>' +
      '</iframe>');
  });
  $( "#dialogSupplierTbl" ).dialog({
    autoOpen: false,
    height: 650,
    width: 450,
    modal: true,
    buttons: {
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });
  $( "#woodClasificationGrid" ).click(function() {
    $( "#dialogWoodTbl" ).html("");
    $( "#dialogWoodTbl" ).dialog( "open" );
    $( "#dialogWoodTbl" ).append(
      '<p>Please choose wood classfication code and description below.</p>'+
      '<iframe src="woodClassification.html" width="100%" height="800">' +
        '<p>Your browser does not support iframes.</p>' +
      '</iframe>');
  });
  $( "#dialogWoodTbl" ).dialog({
    autoOpen: false,
    height: 650,
    width: 450,
    modal: true,
    buttons: {
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });
 
  $( "#dialogSupplierTbl" ).dialog({
    autoOpen: false,
    height: 650,
    width: 450,
    modal: true,
    buttons: {
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });
     $('#tblSupplierPrice').setGridParam({
      url:'processjson.php?path=' + encodeURI('getData/supplierPrice') + '&json=' + encodeURI(JSON.stringify(par_ams)),
      datatype: primeSettings.ajaxDataType,
    });
  
    $('#tblSupplierPrice').trigger('reloadGrid');    
    });
 
    supplierPrice();
});
function supplierPrice(){        //this is for the jqgrid
  $(window).resize(function() {
    $('#tblSupplierPrice').fluidGrid();
  });    
    $("#tblSupplierPrice").jqGrid({
        url: '',                          

        datatype: 'local',       clientSide
        jsonReader : {                //default mapping for json data starts here
            root: function(obj) {
                var root = [];                
                if  ('error' in obj)
                {
                    showMessage(obj.error['class'] + ' error: ' + obj['error']['msg']);
                }
                else
                {
                    $.each(obj['result']['main']['rowdata'], function(rowIndex, rowDataValue) {
                    var row = {};
            $.each(rowDataValue, function(columnIndex, rowArrayValue) {
              var fldName = obj['result']['main']['metadata']['fields'][columnIndex].name;
              row[fldName] = rowArrayValue;                  

            });
            root[rowIndex] = row;// one row value         
                    });
                };
        //alert('this is the root. displays when data display is trigger ' + JSON.stringify(root));        
                return root;
            },          
            page: "result.main.page",                  
            total: "result.main.pageCount",      
            records: "result.main.rows",          
            repeatitems: false,                             
            id: "0"                                                  
        },
    serializeGridData: function(postData) {
      //alert('mao ni xa ang postdata '+ JSON.stringify(postData));  
      var ctr =0;
      var filt=[];
      var c=[];
      $('#tblSearchSupPrice tr').each(function(){
        var td = '';                 
        if ($(this).find("td:first").length > 0) {     
          $(this).find('option:selected').each(function(){
            td = td + $(this).val()+ ',';
          });
          if ($(this).find('input').val().length > 0 ){
            td = td + $(this).find('input').val();
            filt[ctr]=td;
            ctr += 1; 
          }
        }       
      });           
      for (var i = 0;i<filt.length;i++) {
        b = filt[i].split(',');       
        c.push({
          name: b[0],
          comparison: b[1],
          value: b[2]
        });
      }
      if ($("#searchSupPriceAny").val().length > 0){
        c=[];
      }
      var jsonParams = {
      'SessionID':  $.cookie("SessionID"),
      'dataType': 'data',
      'filters': c,
      'simple_search_value':trim($("#searchSupPriceAny").val()),
      'recordLimit': postData.rows,
      'recordOffset': postData.rows * (postData.page - 1),
      'rowDataAsObjects': false,
      'queryRowCount': true,
      'sort_fields': postData.sidx
      };            
    
      if (postData.sord == 'desc')
            {
                jsonParams['sort_descending_fields'] = postData.sidx;
                jsonParams['sort_descending'] = postData.sidx;
            }          
            else
            {
                jsonParams['sort_ascending_fields'] = postData.sidx;
                jsonParams['sort_ascending'] = postData.sidx;  
            }
            alert('this is the jsonParams from supplier price ' + JSON.stringify(jsonParams));
      return 'json=' + JSON.stringify(jsonParams);
    },
    loadError: function(xhr, msg, e) {
      showMessage('HTTP error: ' + JSON.stringify(msg) + '.');
    },
        colNames:['Supplier Name','Supplier Contact Person','Wood Classification Code','Wood Description','Price Description','Price'],
        colModel:[
      {name:'supplier_name'},
      {name:'supplier_contact_person'},
            {name:'wood_classification_code'},
      {name:'wood_classification_desc'},
            {name:'supplier_price_description'},
            {name:'price'}
        ],  
        rowNum:10,                                                     
        viewrecords: true,
        rowList:[10,50,100],                                
        pager: '#tblSupplierPricePager',
        sortname: 'supplier_price_description',   
        sortorder: 'desc',                                    
        loadonce:false,                                            
        height: 250,
    caption: "Supplier Price"
    });
  $("#tblSupplierPrice").setGridWidth($(window).width() - 40);  
}