Question

I’m using a jQuery Grid Plug-In with local data. If I delete a selected row, the row disappears. Then when I go to the next page and back again the deleted row is back again, too!
How can I delete this row permanently or what is going wrong?
Here is the code:

jQuery(document).ready(function(){
        // jQuery main function
        $("#Dialog").dialog({autoOpen:false, show:'slide', hide:'explode', resizable:false, modal:true, buttons:{"OK":function(){ $(this).dialog("close"); }}});
        $("#DelResGrid").dialog({autoOpen:false, show:'slide', hide:'explode', resizable:false, modal:true, buttons: {
            "Abbrechen": function() {
                $(this).dialog("close");
            }, "Alles löschen!": function() {
                // Clear grid content -> execution <-
                $("#ResultGrid").clearGridData(true);
                RefreshMap();
                $(this).dialog('close');
            }
        }});
        $("#Delete").dialog({autoOpen:false, show:'slide', hide:'explode', resizable:false, modal:true, width:425, buttons: {
            "Abbrechen": function() {
                $(this).dialog("close");
            }, "Gewählte Löschen":function() {
                // Delete selected Rows
                var ID = $("#ResultGrid").getGridParam('selrow');
                if(ID == null || ID == undefined) {
                    // No address selected
                    $("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>Bitte eine Adresse ausw&auml;hlen!</p>");
                    $("#Dialog").dialog("option", "title", "Hinweis:");
                    $("#Dialog").dialog("open");
                } else {
                    $("#ResultGrid").delRowData(ID);
       /****************************** Here is a change ******************************/
                    $("#ResultGrid")[0].refreshIndex();
       /****************************** Here is a change ******************************/
                    $("#ResultGrid").trigger("reloadGrid");
                }
                if($("#ResultGrid").jqGrid('getGridParam','records') < 1) {
                    RefreshMap();
                }
                $(this).dialog("close");
            }, "Alles löschen": function() {
                // Clear grid content -> dialog <-
                $(this).dialog("close");
                $("#DelResGrid").dialog("open");
            }
        }});
        $("#ResultGrid")
        .jqGrid({
            // Definitions for result grid
       /****************************** Here is a change ******************************/
            colNames:['#', 'Firma', 'Adresse', 'Postleitzahl', 'Ort', 'Telefonnummer'],
       /****************************** Here is a change ******************************/
            colModel:[
            {name:'ID', index:'ID', width:40, searchable:false, sorttype:'int', align:'center'},
            {name:'Firma', index:'Firma', width:200, searchable:false},
            {name:'Adresse', index:'Adresse', width:160, searchable:false},
            {name:'Postleitzahl', index:'Postleitzahl', width:100, searchable:false, sorttype:'int'},
            {name:'Ort', index:'Ort', width:150, searchable:false},
            {name:'Telefonnummer', index:'Telefonnummer', width:160, searchable:false}
            ],
            datatype: "clientSide",
            height: 'auto',
            loadonce: true,
            pager: '#ResultPager',
            rownum: -1,
        })
        .navGrid('#ResultPager', {view:false, edit:false, add:false, del:false, search:false, refresh:false} )
        .navButtonAdd('#ResultPager', {title:"Adresse ins Addressbuch übernehmen", buttonicon:"ui-icon-disk", caption:"Speichern", onClickButton:function(){
            // Save selected address to database
            var ID = $("#ResultGrid").getGridParam('selrow');
            if(ID == null || ID == undefined) {
                $("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>Bitte eine Adresse ausw&auml;hlen!</p>");
                $("#Dialog").dialog("option", "title", "Hinweis:");
                $("#Dialog").dialog("open");
            } else {
                var AddressRow = $("#ResultGrid").getRowData(ID);                       
                if(AddressRow.Telefonnummer == "" || AddressRow.Telefonnummer == undefined) {
                    $("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>Adresse kann nicht &uuml;bernommen werden, da sie keine Telefonnummer enth&auml;lt</p>");
                    $("#Dialog").dialog("option", "title", "Hinweis:");
                    $("#Dialog").dialog("open");
                } else {
                    $.ajax({
                        type: 'POST',
                        url: 'Edit.php',
                        data: {oper:'ManAdd', Name:AddressRow.Firma, Address:AddressRow.Adresse, PLZ:AddressRow.Postleitzahl, Ort:AddressRow.Ort, TelNr:AddressRow.Telefonnummer}
                    });           
                    $("#MyGrid").trigger("reloadGrid");
                }
            }
        }})
        .navButtonAdd('#ResultPager', {title:"Löschen", buttonicon:"ui-icon-trash", caption:"Löschen...", onClickButton:function(){
            $("#Delete").dialog("open");
        }});
     });

Thanks for answers!

Answer 1

It can be a known problem with refreshing of the local indexes (see jqgrid reload grid partially working). Try to call

$("#ResultGrid")[0].refreshIndex();

after modifying the jqGrid data. You don’t post the full code, so you should test this suggestion yourself.