After making edits, the JQGrid will automatically refresh the data with the updated information retrieved from the

My Jqgrid is in need of some editing. I have successfully set it up to save data after editing, but there is an issue with the grid not refreshing with the database data once it's saved. For instance, the version field gets updated automatically by the backend application, but after editing, the old value persists. I've tried using afterSubmit and afterComplete, but they didn't work. I even placed an alert to check if the function was called, but no alert was shown. I also set loadonce to false and reloadaftersubmit to true, but that didn't help either. It seems like I may not have configured the editing correctly or placed the parameters in the wrong location.

After saving an edit, the entire updated page data is returned to the Jqgrid in JSON format. The problem arises when the old data is displayed instead of the updated data. How can I ensure that the updated data is displayed after an edit?

UPDATE: I discovered that the afterSubmit is triggered when editing through the popup box. However, editing via the formatoptions in the table itself doesn't trigger afterSubmit. When editing and saving data directly from the grid without the popup, I want afterSubmit to refresh the table. Where should I place afterSubmit or how can I achieve this?

/**
 * Initialize and Draw JQGrid
 * @return
 */
function drawFOMJQGrid(){

    var lastsel2;

    jQuery("#tblGrid").jqGrid({     

        height: 180, 
        width:990,
        datatype: "json", 
        colNames:['','Hotel','Outlet','Major Group','Item Group','Version'], 
        jsonReader : {
              root: "regDetails", 
              page: "page",
              total: "total",
              records: "records",   
              repeatitems: false
        },
        colModel:[ 
            {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false}, 
            {name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false}, 
            {name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
            {name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}


        ],

        onSelectRow: function(id){
        },
        /*afterSubmit : function(response, postdata){
                        alert("AAAA");
        },  
        afterComplete : function(response, postdata){
                        alert("AAAA2");
        },  */              
        //rowList:[10,20,30], 
        rowNum:5,   
        pager: '#divGridPg', 
        sortname: 'hotelName', 
        viewrecords: true, 
        sortorder: "outletName",
        gridview: true, 
        bgiframe: true,
        autoOpen: false,
        caption: 'POS Item Pricing',
        forceFit: false,
        loadtext: 'Loading ...',
        sortable: true,
        loadonce: false,
        editurl:  "itemPricingSave.action", //"/js/itemPricing/server.js",          
        datatype: "json"




    }); 



    $("#tblGrid")[0].addJSONData(regGridJSONData);
    $("#tblGrid").setGridParam({datatype: 'json'});
    jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});       


}

/**
 * Initialize and Draw JQGrid
 * @return
 */
function drawFOMJQGrid(){

    var lastsel2;

    jQuery("#tblGrid").jqGrid({     

        height: 180, 
        width:990,
        datatype: "json", 
        colNames:['','Hotel','Outlet','Major Group','Item Group','Version'], 
        jsonReader : {
              root: "regDetails", 
              page: "page",
              total: "total",
              records: "records",   
              repeatitems: false
        },
        colModel:[ 
            {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'hotelName',index:'hotelName',align:"left",width:30,resizable:false}, 
            {name:'majorGroupName',index:'majorGroupName',align:"left", width:20,resizable:false}, 
            {name:'itemGroupName',index:'itemGroupName', width:30,align:"left",resizable:false},
            {name:'version',index:'version', width:20,align:"right",resizable:false,editable:true,hidden: false}


        ],

        onSelectRow: function(id){
        },
        /*afterSubmit : function(response, postdata){
                        alert("AAAA");
        },  
        afterComplete : function(response, postdata){
                        alert("AAAA2");
        },  */              
        //rowList:[10,20,30], 
        rowNum:5,   
        pager: '#divGridPg', 
        sortname: 'hotelName', 
        viewrecords: true, 
        sortorder: "outletName",
        gridview: true, 
        bgiframe: true,
        autoOpen: false,
        caption: 'POS Item Pricing',
        forceFit: false,
        loadtext: 'Loading ...',
        sortable: true,
        loadonce: false,
        editurl:  "itemPricingSave.action", //"/js/itemPricing/server.js",          
        datatype: "json"




    }); 



    $("#tblGrid")[0].addJSONData(regGridJSONData);
    $("#tblGrid").setGridParam({datatype: 'json'});
    jQuery("#tblGrid").jqGrid('navGrid','#divGridPg',{edit:true,add:false,del:false,reloadAfterSubmit:true});       


}
javascriptjsonjqgridrefreshedit

Answer №1

This is the method I used to trigger the grid reload:

.navGrid('#pager',
                    {edit:true,
                    add: true, 
                    del:true,refresh:false},
              { // edit options

                    afterSubmit: function() {
                        comptes[0].clearToolbar();
                        comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                          return [true,'',false]; // no error and no new rowid
                         }
                }, 
                { // add options

                     afterSubmit: function() {
                            comptes[0].clearToolbar();
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                } ,
                { // delete options
                     afterSubmit: function() {
                            comptes[0].clearToolbar();
                            comptes.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
                        return [true,'']; // no error
                    }
                }       
               );

Answer №2

Refresh the jqGrid with updated information once all edits have been completed by implementing the code snippet below:

jQuery("#grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please refrain from clearing the text field as it will delete the input value

I feel like I must be overlooking something really minor because I just can't seem to find it! I've been attempting to sanitize the text input by setting the state to ('') and while it clears the variable, the HTML input keeps displayi ...

javascriptreactjsmaterial-uifrontend

Make sure to retain PHP includes/requires when dynamically loading a new page using AJAX

My website has a main page with a header, navbar, footer, and content is loaded using AJAX into a div: <div id="content" class="page-content"></div> I am wondering if it's feasible to load a page dynamically into the content div using AJA ...

javascriptphpjqueryajax

The JSON data did not begin with an array or object and the option to permit fragments was not enabled

Encountering an error in Xcode debugger while making a POST request Error Domain=NSCocoaErrorDomain Code=3840 "JSON text did not start with array or object and option to allow fragments not set." UserInfo={NSDebugDescription=JSON text did not start with ...

phpjsonswiftposterror-handling

Utilizing argparse with JSON files in Python: A comprehensive guide

Currently, I am engaged in a Python project and attempting to configure some arguments using argparse. However, when I input one of these in the terminal, I receive information from a JSON file but am struggling to comprehend how to achieve it. Here is wha ...

pythonjsonargparse

What is the mechanism behind angular2's spa routing functioning seamlessly without the need for the hash character in the url?

During my experience with the Angular2 "Tour of Heroes" tutorial, I made an interesting observation about how their single page application router functions without a trailing hash symbol (#) in the URL. This differs from the Kendo SPA router, which typica ...

javascriptangularangular-ui-routersingle-page-applicationrouter

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

javascriptjqueryhtmlcsstwitter-bootstrap

Developed technique for grouping arrays in JavaScript based on frequency of occurrence

I have a collection of arrays in javascript and I need to perform some calculations. Here is how my array looks: https://i.sstatic.net/m0tSw.png In each array: - The first value represents a code. - The second value indicates the size. - And the thir ...

javascriptarraysreduce

What is the process by which Node can access predefined variables in clustering?

Consider the following code snippet: var running = false; var cluster = require('cluster'); if(cluster.isMaster){ cluster.fork(); running = true; } If this code is executed within multiple forks, would the value of 'running' ...

javascriptnode.js

Performing JavaScript functions after fetching an XSLT page via AJAX

Is there a way to trigger JavaScript at a particular time without relying on setInterval() or onClick()? The issue I'm facing is that when I click to load an XSLT page using Ajax, the JavaScript within it does not execute even though it's writt ...

javascriptjqueryhtmlajaxxslt-2.0

Using an API to dynamically configure the columnVisibilityModel within the MUI DataGrid Pro

Upon review of the columnVisibilityModel in Mui, it appears to simply be a JSON object. When I make an API call that sets the JSON object, I encounter an error when passing it to the grid. For example: { id: false, name: true, middle: false } Sett ...

reactjsjsonmaterial-uidatagrid

Change the time format from '18/10/2016 10:31:22PM' to '18/10/2016 22:31:22' in JavaScript

var currentDate = new Date('18/10/2016 10:31:22PM'); var formattedTime = currentDate.toLocaleTimeString(); alert(formattedTime); This code is returning an 'invalid date' output. To fix this issue, I need to convert the date format to ...

javascript

Tips for showing more rows by clicking an icon within an Angular 2 table

When I click on the plus (+) button in the first column of each row, only one row expands. How can I modify it to expand multiple rows at a time? Thanks in advance. <div> <table class="table table-striped table-bordered"> <thead> ...

javascripthtmlcssangularbootstrap-4

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Hey there! I recently implemented smooth scrolling on my website, but it seems to only work on single-page layouts. How can I make it function properly within an absolutely positioned scrollable element? Here are the link to my website and the correspond ...

javascriptjqueryhtml

What are some ways to enhance the functionality of the initComplete feature in Dat

$('#example').dataTable( { "initComplete": function(settings, json) { alert( 'DataTables has finished its initialisation.' ); } } ); Is there a way to extend the initComplete function for other languages? $.extend( true, $.f ...

javascriptjqueryjquery-pluginsdatatables

Incorporate action icons (such as edit and delete) into a table in React.js using material-ui

Within my existing table, I utilized a library known as react-bootstrap-table-next This library effectively displays data in a table format with values originating from a JSON response Now, my goal is to integrate an Action column that includes options f ...

javascriptreactjsmaterial-ui

Troubles arising from React component integration with Gatsby JS

As I dive into creating a stunning portfolio website with Gatsby js, I encountered an issue while trying to integrate the card component from the gatsby-plugin-material-ui package. The card resides in a separate file within my components directory and is e ...

javascriptreactjsmaterial-uigatsbygatsby-plugin

The manner in which sessionStorage or localStorage is shared between different domains

I am looking to persist data across different domains using sessionStorage or localStorage. How can I achieve this? The data needs to be shared between a Vue project and a React project. English is not my strong suit, so I hope you are able to understand ...

javascriptreactjsvue.js

Retrieving an array from a nested JSON structure using $http.get in combination with mongoose and Node.js

In my possession is a JSON representation of an apartment listing: { "_id": { "$oid": "5673d1dcf93fe452d80c2c2c" }, "street": "myStreet", "buildingNumber": 1, "apartmentNumber": 1, "UsersAndQuestions": [ { ...

javascriptjsonnode.jsmongodbmongoose

Is it possible to execute TypeScript class methods in asynchronous mode without causing the main thread to be blocked?

Creating an app that retrieves attachments from specific messages in my Outlook mail and stores the data in MongoDB. The challenge lies in the time-consuming process of receiving these attachments. To address this, I aim to execute the task in a separate t ...

javascriptnode.jsmongodbtypescriptoutlook

Issue encountered with the URL for the image in a JSON file following the utilization of multer for image uploads in a Node.js

Using multer to upload images for a blog website. After uploading an image with Postman, the filename is saved in the data.json file under "uploads\" directory. How can I save it as "uploads/" instead of "uploads\"? data.json { "id& ...

javascriptnode.jsjsonmulter