how to reload the Jqgrid after upload the file by click upload Button?

Question

When I upload a file by click upload button . It should reload my jqgrid and the new value should be on top in the grid, It is a scenario of my Task. What are the changes I need to do in Jquery?. I use loadonce = False but it is load the grid continuously. If I reload the entire page, I am getting value in the grid.

_initUploadedFilesGrid: function(optionsM, resData){
             $('table#viewUploadedFiles').trigger("reloadGrid");
             $("#tmp").data('options', optionsM);
             $('#viewUploadedFilesDiv table#viewUploadedFiles').cb({
                    datatype: 'json'
                    ,mtype: 'POST' 
                    ,url: optionsM.urls.getAllUploadedFiles
                    , jsonReader : {
                        root:"UploadedFiles",
                    }
                    ,colNames:  [
                                 'Vendor Id'
                                 ,'Import ID'
                                 ,'Imported Organization'
                                 ,'Source Authoring Tool'
                                 ,'Import Start Time'
                                 ,'Import Completed Time'
                                 ,'Status'
                                 ,'File Name'
                                 ,'File Type'
                                 ,'Content Area'
                                 ,'Course'
                                 ,'Band'
                                ]
                    ,colModel:  [
                                {name: 'VendorId'}
                                ,{name: 'ImportFileId'}
                                ,{name: 'organizationId'}
                                ,{name: 'sourceAuthoringTool'}
                                ,{name: 'importStartTime'}
                                ,{name: 'importCompletedTime'}
                                ,{name: 'status'}
                                ,{name: 'fileName'}
                                ,{name: 'fileType'}
                                ,{name: 'contentAreaId'}
                                ,{name: 'CourseId'}
                                ,{name: 'BandId'}
                                 ]
                    ,columnchoosercaption: optionsM.msgs.chooseColumns
                    ,height: 'auto'
                    ,width: 1150
                    ,pager: '#viewUploadedFilesGridPager'
                    ,sortname: 'qImportFileId'
                    ,sortorder: "desc",
                    //,loadonce: false,

                    onSelectRow: function(rowId, status){

                        var $grid = $('#viewUploadedFiles table[id=viewUploadedFiles]');
                        var row = $grid.getRowData(rowId);
                        $.cete.contentEditor._itemStatusDialog(row.ImportFileId);
                    },
             });
                $('#viewUploadedFiles table#viewUploadedFiles').jqGrid('setGridWidth', $('#gridviewUploadedFilesContainer').width());

            },

$('input:radio[name=gradeType]').click(function() {
          var selected = $('input:radio[name=gradeType]:checked').val();
          if (selected=="Course") {
              $('#BandSettingDiv').hide();
              $('#CourseSettingDiv').show();
              $('#CourseId option').eq(0).attr("selected",true);
              $('#BandId option').eq(0).attr("selected",true);
            }
          else{
                 $('#BandSettingDiv').show();
                 $('#CourseSettingDiv').hide();
                 $('#CourseId option').eq(0).attr("selected",true);
                 $('#BandId option').eq(0).attr("selected",true);
            }
        });
    me._initUploadedFilesGrid(options, "");

},

Answer 1

Try this code changes... you said, there is a upload button which is in a dialog box right. use your upload dialog box id instead of this $("#progressOfUpload") and It will work for sure!

$('input:radio[name=BandType]').click(function() {
          var selected = $('input:radio[name=BandType]:checked').val();
          if (selected=="gradeCourse") {
              $('#BandSettingDiv').hide();
              $('#CourseSettingDiv').sh
              $('#CourseId option').eq(0).attr("selected",true);
              $('#BandId option').eq(0).attr("selected",true);
            }
          else{
                 $('#BandSettingDiv').show();
                 $('#CourseSettingDiv').hide();
                 $('#CourseId option').eq(0).attr("selected",true);
                 $('#BandId option').eq(0).attr("selected",true);
            }
        });
        $("#progressOfUpload").off('dialogclose').on('dialogclose', function(event) {
            $('table#viewUploadedFiles').jqGrid('GridUnload');
            me._initUploadedFilesGrid(options, "");
        });
    me._initUploadedFilesGrid(options, "");

},

Answer 2

Your code seems be very suspected. Especially the selectors like

$('table#viewUploadedFiles')
$('#viewUploadedFilesDiv table#viewUploadedFiles')
$('#viewUploadedFiles table[id=viewUploadedFiles]')

The usage of unknown method .cb , which have the same options like .jqGrid is suspected too.

I suppose that you create HTML markup with id duplicates , which is not allowed in HTML and can follow many problems. The values of id attribute on the page have to be unique.

Even if the <table> with id equal to viewUploadedFiles is unique, you should never use the selectors like #viewUploadedFilesDiv table#viewUploadedFiles or table[id=viewUploadedFiles] . DOM API hold the map (dictionary) object which allows to get DOM element by id very quickly. There are native DOM method getElementById . If you use $("#viewUploadedFiles") then the method will be used by jQuery internally and the execution will be quickly. If you use other selectors like table[id=viewUploadedFiles] the execution will be slowly because getElementById can't be used. The selectors like '#viewUploadedFilesDiv table#viewUploadedFiles' will be slowly too because jQuery will first make $("#viewUploadedFilesDiv") using getElementById and then execute .find("table#viewUploadedFiles") on $("#viewUploadedFilesDiv") . It makes the execution slowly and should be used only if your HTML markup is buggy and you allows to have multiple elements with the same id="viewUploadedFiles" . jqGrid code uses id selector with the grid id ( $("#viewUploadedFilesDiv") ) internally. Thus it doesn't support usage on <table> which have id duplicates. As the result another grid could be reloaded and you could have recursive reloading of the parent grid.