jqGrid Act Strange Reloading Data After Insert and Update

Question

JqGrid acting strange. I just create some master page which contains jqGrid refering to some table in my database.

This page is working pefectly, then i need to use the same logic and i copied exact page with additional php file and create some adjustment so it pointing to the right table.

In my master page (department page --which is the first page (works 100%)) the jqgrid function working normal, BUT in my second and third page which is based on the first page, the jqgrid is acting strange.

When i create new value or update some value, the jqgrid should be automatically reloads the grid with NEW data. But in my case, the grid reloads the data but NOT writing at all.

This strange behaviour is NOT happened in my first jQGrid page (dept page).

I also insert some screenshot to make it more clear

Then simple add value to the grid, referring to some php file. The value is executed and then STORED in database. This method using POST method.

Then the jQgrid automatically GET the new data from database, and should be Write on the GRID. But in my CASE, the grid is not writing the data.

As you can see the the bottom right of the screen shot, there are 11 values, from the 1st screenshot, there are only 10 values. So, the grid actually execute the INSERT statement, but when it reloads, it's broken.

Is there any possibilities how to overcome this?? Thank you.

EDITED: HTML code:

<table id="location"><tr><td /></tr></table>
<div id="pager-location"></div>

JavaScript code:

$(document).ready(function() {
    //alert("start");
    jQuery("#location").jqGrid({
        mtype:'GET',
        url:'functions/get_location.php',
        editurl:'functions/edit_location.php',
        datatype: "JSON",
        colNames:['Location ID','Location'],
        colModel:[
            {name:'idms_location',index:'idms_location', width:150, editable:true,add:true, del:true, key:true},
            {name:'location',index:'location', width:800,editable:true, add:true, del:true}     
        ],
        loadComplete: function () {
        alert("OK");
        },    
        loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                  'textStatus: ' + textStatus + '\n' +
                  'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },
        rowNum:10,
        rowList:[5,10,15],
        pager: '#pager-location',
        sortname: 'idms_location',
        viewrecords: true,
        jsonReader: {repeatitems: true, idms_location: "idms_location" },
        sortorder: "asc",
        caption:"MSC Locations"
    });
    jQuery("#location").jqGrid('navGrid','#pager-location',{edit:true,add:true,del:true},{},{},{},{closeAfterSearch:true},{});
    jQuery("#location").jqGrid('gridResize',{minWidth:350,maxWidth:850,minHeight:80, maxHeight:350});
    //alert("end");
});

Answer 1

I verified the code which you used and found the reason. You had id duplicate problem in your code. You defined <table> element used for jqGrid as following

<table id="location"><tr><td /></tr></table>
<div id="pager-location"></div>

It has "location" as the id. Later you defined

colModel: [
    {name:'idms_location',index:'idms_location', width:150, editable:true,add:true, del:true, key:true},
    {name:'location',index:'location', width:800,editable:true, add:true, del:true}     
],

where the name location will be used as the column name. The problem is that the column name will be used to build id name of different elements of the grid. Moreover the form editing uses the column name direct as id value of the <input> field which represent location. After usage of Add form the following element

<input name="location" class="FormElement ui-widget-content ui-corner-all" id="location" role="textbox" type="text">

exists on the page with id="location" too. If thhe user close the form it will be hidden, but not destroyed. Because the edit form will be placed on the page before <table id="location"> the next $("#location tbody:first") used in the line don't find the table more and the grid stay empty.

What you should do is just rename <table id="location"> to something like <table id="grid-location">` or choose any other name. You should update the JavaScript code corresponded.

Other changes which should be done in the grid:

• change jsonReader: {repeatitems: true, idms_location: "idms_location" } to jsonReader: {id: "idms_location" }.
• add gridview: true option.
• add autoencode: true option.
• remove non-existing options add:true, del:true properties from colModel
• remove index properties from colModel.
• you should fix Content-Type HTTP header which you use in the server response with JSON data. It should be Content-Type: application/json instead of Content-Type: text/html which you use currently. It's just one line of PHP code.
• you can remove {edit:true,add:true,del:true} options of navGrid - it's default options.