title: How to refresh the jqgrid automatically?
body: <p>I use the following Script for <strong>bind the details from the sql database to jqgrid</strong>.Add,Edit,Delete work properly,my problem is,If I try to add ,edit,delete the data in jqgrid it was updated in database but not display in the jqgrid after i <strong>refresh the page</strong> then the data display in the jqgrid.<strong>How to refresh the jqgrid automatically after the submit button was clicked?</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
  
            $(document).ready(function(){
            var mydata=new Array();
  
                  $.extend({
                  getValues: function(url) {
                  var result = null;
  
                  $.ajax({
  
                      url: url,
                      type: 'POST',
                      data:'Param=value',
                      async:false,
                      success: function(data) {
                              result=JSON.parse(data);
                               }
                          });
                    return result;
                  }
  
                  });
  
                  mydata = $.getValues(Some url);//get the data from the url
  
             $("#datagrid").jqGrid({
  
                  datatype: "local",
                  data: mydata,
                  colNames:['companyid','company', 'price', 'Change','perchange','LastUpdated'],
                  colModel:[
                      {name:'companyid',index:'companyid', width:100,editable:true,editoptions:{size:10}},
                      {name:'company',index:'company', width:100,editable:true},
                      {name:'price',index:'price', width:100,editable:true,editoptions:{size:10}},
                      {name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}},
                      {name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}},
                      {name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}}
              ],
              rowNum:10,
              rowList:[10,20],
              loadonce: true,
              pager: '#navGrid',
              sortname: 'companyid',
              sortorder: "asc", 
              height: 210,
              width:600,
              onSelectRow: function(id){
                     getID = jQuery("#datagrid").jqGrid('getCell', id, 'companyid')
                  },
              viewrecords: true,
              caption:"JQ GRID"
              });
  
               jQuery("#datagrid").jqGrid('navGrid','#navGrid',{edit:true,add:true,del:true, addtext: 'Add', edittext: 'Edit', deltext: 'Delete'},
  
              //For Edit
                   {
                    closeOnEscape: true,
                    closeAfterEdit: true,
                    reloadAfterSubmit:true, 
                    closeOnEscape: true,
                    url:'Some url'
  
                   },
              // For Add
                   {
  
                   closeOnEscape: true,
                   closeAfterAdd: true,
                   reloadAfterSubmit: true, 
                   closeOnEscape: true,
                   url: 'Some url'
                   },       
              // For Delete
                 {
                      url:'Some url',
                      closeAfterDelete: true,
                      reloadAfterSubmit: true, 
                      closeOnEscape: true,
                      onclickSubmit: function(e, postdata)
                      {
                       e.url = 'Some url'
                      }
                 }
  
  
               );
  
  
            });
  
  
            &lt;/script&gt;
  </code></pre>