Question

I use the following Script for bind the details from the sql database to jqgrid.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 refresh the page then the data display in the jqgrid.How to refresh the jqgrid automatically after the submit button was clicked?

    <script type="text/javascript">


          $(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'
                    }
               }


             );


          });


          </script>

Answer 1

You need to trigger reloadGrid :-

  $("#datagrid").trigger("reloadGrid");