Show GeoJSON features on click (OpenLayers 4)

Question

Using OpenLayers 4 displaying a map with GeoJSON data(few polygons and circles features in it). Onload everything is displaying as expected.

Now trying to show different GeoJson data on ajax onClick event. Tried docketSource.refresh(); But not working. Please suggest me a solution.

My button

<p:commandButton value="Change Data" ajax="true"
actionListener="#{geojsonMapController.prepareGeoJson}" oncomplete="changeGeoJsonData();"/>

JS code

var map, docketLayer, docketSource;    

docketSource = new ol.source.Vector({
    url:'http://localhost:8080/mapApp/resources/map/fetch?111',
    format: new ol.format.GeoJSON()
});

docketLayer = new ol.layer.Vector({
    source: docketSource,
    style: styleFunction
}); 

map = new ol.Map({
    layers: [docketLayer],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 1
    })
});

function changeGeoJsonData(){
    docketSource = new ol.source.Vector({
    url: 'http://localhost:8080/mapApp/resources/map/fetch?555',
        format: new ol.format.GeoJSON()
    });
    docketSource.refresh();
}

Answer 1

It appears you are not updating the Vector source. You should call the setSource() method on the vector:

docketLayer.setSource(...); <-- new Source config here