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);  
}

my code .html with jqgrid problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ramagal Supplier</title>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/> 
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" />   
   
        <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
   
    <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
   
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="globalFunc.js"></script>   
  <!--  <script type="text/javascript" src="supplier.js"></script>   
    <script type="text/javascript" src="woodClassification.js"></script>   
    <script type="text/javascript" src="supplierPrice.js"></script>    -->
    <script type="text/javascript" src="newSP1.js"></script>   
   
    <script type="text/javascript" src="mainindex.js"></script>
        <script type="text/javascript" src="prime-settings.js"></script>
   
    <style>
        html, body {
                margin: 0;
                padding: 0;
                font-size: 83.5%;
        }
    .ui-jqgrid {font-size:0.8em}
    </style>
  </head>
  <body>
    <h1>Supplier Price Table</h1>
        <h2>Query Data</h2><br> 
            <p>Search from any fields: &nbsp;<input type = "text" id = "searchSupPriceAny" value = "">
      <input type = "button" id = "btnsearchSupPriceAny" value = "Go simple"><p>
                    
      <div style="width:100%">
                <table id="tblSupplierPrice"></table>
                <div id="tblSupplierPricePager"></div>
            </div>
        </div>    
    <!--//dialog for adding data -->
    <div id="dialogSupPriceAdd" title="Add new data">
      <p class="validateTips">All form fields are required.</p>
      <form><fieldset>
      
        <p><label>Supplier name & contact person:</label>
          <input class = 'supplier' type = 'text' id = 'supplierInput' value = '' disabled="disabled" STYLE="color: blue";>
          <input type = 'button' id = 'supplierGrid' value = '...'>
         
        <p><label>Wood Code & Description&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
          <input class = 'wood' type = 'text' id = 'woodInput' value = '' disabled="disabled" STYLE="color: blue";>
          <input type = 'button' id = 'woodClasificationGrid' value = '...'></p>
       
        <p><label>Supplier Price Description.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
          <input type="text" id="addSupPriceDesc" value=""/></p>
        <p><label>Price&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
          <input type="text" id="addSupPrice" value=""/></p>
         
        </p></fieldset>
      </form>
    </div>
 
    <!-- //dialog for SupplierGrid in adding -->
    <div id="dialogSupplierTbl" title="Supplier">      
    </div>
    <!-- //dialog for WoodGrid in adding -->
    <div id="dialogWoodTbl" title="Wood Classification">      
    </div>

    <button id="btnSupPriceAddnew">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>
  
   
    <div id="dialog" title="Message">
            <p><span id="message"></span></p>
        </div>
  </body>
</html>

this is my me

Hi, my name is Jay Ann Patangan, a Software Engineer @ Primary Sofware Developement Corp. Welcome to my blog.

Here, I am about to teach you everything I learn about basic jQuery, javascript and HTML. Enjoy learning.