Openlayers vector layer with WFS protocol not refreshed properly after Insert,Update and Delete operations

Question

In my web map application, I have added the wfs vector layer for feature editing. Everything is working fine except the refresh function of wfs vector layer. Refresh function with force ture option not update layer properly.I am refreshing the entire map page to see the correct output. Please check my code and screenshot below for refrence. Please anyone help me to fix this.

My code is:

var wfsRefresh;
function init(){ 
format = 'image/png';

bounds = new OpenLayers.Bounds(
            -288161.9289062237, -435.65815425360597,
            949406.755566389, 1300000
        );
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 5079.826789665053,
projection: "EPSG:404000",
units: 'm'
};

osMap = new OpenLayers.Map('map', options)

//Setup Base layer
tiled = new OpenLayers.Layer.WMS(
            "Oxford_Map", "http://xxx.xx.x.xx:8080/geoserver/cite/wms",
            {
                LAYERS: 'Oxford_Map',
                STYLES: '',
                format: format,
                tiled: true,
                tilesOrigin: osMap.maxExtent.left + ',' + osMap.maxExtent.bottom
            },
            {                        
                buffer: 0,
                displayOutsideMaxExtent: true,
                isBaseLayer: true,
                yx: { 'EPSG:404000': false }
            }                  
        );

  untiled = new OpenLayers.Layer.WMS(
            "Oxford_Map", "http://xxx.xx.x.xx:8080/geoserver/cite/wms",
            {
                LAYERS: 'Oxford_Map',
                STYLES: '',
                format: format
            },
            {                        
                singleTile: true,
                ratio: 1,
                isBaseLayer: true,
                yx: { 'EPSG:404000': false }
            }                    
        );

   osMap.addLayers([untiled, tiled]);


   wfsRefresh = new OpenLayers.Strategy.Refresh({ force: true, active: true });

  graphicsWFSlayer = new OpenLayers.Layer.Vector("Graphics Data", {
  strategies: [new OpenLayers.Strategy.BBOX(),wfsRefresh ],       
  projection: osMap.projection,        //EPSG:404000
  protocol: new OpenLayers.Protocol.WFS({
    version: '1.1.0',
    url: 'http://xxx.xxx.x.xx:8080/geoserver/wfs',
    featurePrefix: 'cite',
    featureNS: 'http://www.opengeospatial.net/cite',
    maxExtent: osMap.getExtent,
    featureType: 'ODC_Private_Graphics_Data',
    geometryName: 'the_geom',
    extractAttributes: true,            
    srsName: osMap.projection,  //EPSG:404000
    isBaseLayer: false,
    visibility: true,
    schema: 'http://xxx.xxx.x.xx:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&;typename=cite:ODC_Private_Graphics_Data'            
})
});

osMap.addLayers([graphicsWFSlayer]); 
}

// This function will be called when we click save icon on map web page.

function saveFeature(){
var selFeat = graphicsWFSlayer.selectedfeatures[0];
var featCoordinates = '';
var geoType = selFeat.geometry.CLASS_NAME.split('.');
var vertices = selFeat.geometry.getVertices();
for (var nd = 0; nd < vertices.length; nd++) {
   if (featCoordinates == '') {
      featCoordinates = vertices[nd].y + " " + vertices[nd].x
 }
 else {
     featCoordinates += ', ' + vertices[nd].y + " " + vertices[nd].x
 }
}
if (selFeat.geometry.CLASS_NAME == 'OpenLayers.Geometry.Polygon' && vertices.length > 2) {
 featCoordinates += ', ' + vertices[0].y + " " + vertices[0].x
 featCoordinates = '(' + featCoordinates + ')';
}            
WebService.saveGraphicsFeature(keyId, featCoordinates);
wfsRefresh.refresh(); 
}

// This function will be called when we click delete icon on map web page.
function saveDeletedGraphicsFeature() {
for (var del = 0; del < graphicsWFSlayer.selectedfeatures.length; del++) {
var idSplit = graphicsWFSlayer.selectedfeatures[del].fid.split('.');
var featId = idSplit[1];
    WebService.deleteGraphicsFeatures(featId);
}
wfsRefresh.refresh();
}



 //My webservice function is:
 <WebMethod(enablesession:=True)> _
 Public Function saveGraphicsFeature(ByVal ObjId As String, ByVal coordinates As      String) As String
  Try
    If updateGraphicsFeature(ObjId, coordinates) = False Then
        Dim qryStr As String = "INSERT INTO ODC_Private_Graphics_Data (the_geom)    VALUES (ST_GeomFromText('POLYGON(" + coordinates + ")'))"
        dbObj.Connect()
        Dim insertCmd As NpgsqlCommand = New NpgsqlCommand(qryStr, dbObj.dbCon)
        Dim affectedRows As Integer = insertCmd.ExecuteNonQuery
        dbObj.Disconnect()
        insertCmd.Dispose()
        insertCmd = Nothing
 End if
 Catch ex As Exception

Finally
    dbObj.Disconnect()
End Try
End Function

Private Function updateGraphicsFeature(ByVal ObjId As String, ByVal coordinates As   String) As Boolean

Try

    Dim qryStr As String = "UPDATE ODC_Private_Graphics_Data SET the_geom =    ST_GeomFromText('POLYGON(" + coordinates + ")') WHERE gid = " & ObjId

    dbObj.Connect()
    Dim updateCmd As NpgsqlCommand = New NpgsqlCommand(qryStr, dbObj.dbCon)
    Dim updatedRows As Integer = updateCmd.ExecuteNonQuery
    dbObj.Disconnect()
    updateCmd.Dispose()
    updateCmd = Nothing

    If updatedRows = 1 Then Return True

    Return False

Catch ex As Exception

Finally
    dbObj.Disconnect()
End Try
End Function


<WebMethod(enablesession:=True)> _
 Public Function deleteGraphicsFeatures(ByVal ObjId As String) As Boolean
    Try

        Dim qryStr As String = "DELETE FROM ODC_Private_Graphics_Data WHERE Sno = " & ObjId
        dbObj.Connect()
        Dim deleteCmd As NpgsqlCommand = New NpgsqlCommand(qryStr, dbObj.dbCon)
        Dim deletedRows As Integer = deleteCmd.ExecuteNonQuery
        dbObj.Disconnect()
        deleteCmd.Dispose()
        deleteCmd = Nothing

    Catch ex As Exception

    Finally
        dbObj.Disconnect()
    End Try
  End Function

Answer 1

OpenLayers and GeoServer have built-in Save Strategies. Instead of going through your web script, you should probably consider using this:

http://dev.openlayers.org/docs/files/OpenLayers/Strategy/Save-js.html

This will automatically send the new data to the server and refresh the map when necessary. I suspect that your refresh strategy get in conflict with the status of your features.

In fact what probably happens is that you send your save/delete call to the server and refresh the map before it is done inserting/deleting. This is why you get only half the features. You should modify your code for WebService.saveGraphicsFeature(keyId, featCoordinates); to send a "save_successful" event when done and refresh only when it's done. Since We don't have the code related to your JavaScript WebService, I can't provide you an example, but that's the idea.