Cannot set WFS filter the second time

Question

Here is my scenario. The page loads and the map loads with an empty vector layer. So its there, but has no features. Then the user clicks a button and a CQL filter loads features according to the CQL settings.

My methodology to implement this. I set an empty vector layer, no loader or strategy. The button the user clicks for the first time calls a "initialization " function (=firstTimeOnly()) that:

• sets a loader and a strategy to the vector layer

• now that a loader exists, calls another "filtering" function (=changeFilter()) that
  resets the loader's cql filter and loads features

• now the "filtering" function gets attached to the button and called
  with every click. The "initialization" function served its purpose
  and detaches itself from the button.

Here is my code

<button id= "magicButton", onclick="firstTimeOnly()">Click me</button>

//set globals to use them
var cqlFilter = "name='testpoint9'";
var urlTemplate =  'http://localhost:5550/geoserver/mymap/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=mymap:layerName&CQL_FILTER={{CQLFILTER}}&outputFormat=application/json';
var loader = function (extent) {
        var url = urlTemplate.replace('{{CQLFILTER}}', cqlFilter);
        $.ajax(url, {
            type: 'GET',
            success: function(response) {
                var res = response;
                var geojsonFormat = new ol.format.GeoJSON();
                sourceVector.addFeatures(geojsonFormat.readFeatures(response));
            }
        })
    };

var strategy = new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}));

//empty vector source
var sourceVector = new ol.source.Vector({});

function changeFilter() {
    //remove all, set cql and reload
    var featsToRemove = layerVector.getSource().getFeatures();
    for (var f=0;f<featsToRemove.length;f++)
    {
        layerVector.getSource().removeFeature(featsToRemove[f]);
    }
    cqlFilter = "name LIKE 'p'";
    sourceVector.clear(true);
}

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

function firstTimeOnly() {
    sourceVector.set('loader', loader);
    sourceVector.set('strategy', strategy);
    changeFilter();
    document.getElementById("magicButton").removeEventListener("click", firstTimeOnly, false);
    document.getElementById("magicButton").addEventListener("click", changeFilter, false);
}

This is based to erilem's code for cql filter resetting and if I use just his code works fine. But if I want to start with an empty layer and edit it as the above, I get nothing. My code gives no errors. But, if I click the button I get nothing.

Please advide me how to fix this. Or maybe its an overkill and you suggest something smarter.

Thanks

UPDATE

If I put

console.log("loader "+sourceVector.get('loader'));

at the end of the changeFilter I get the loader function. So, I guess the first time I click the button, the firstTimeOnly actually sets a loader and calls changeFilter. So, the loader is there, but does not work? Any help?

Answer 1

Without getting into potential issues with Openlayers the issue I see is that removeEventListener only works for removing listeners that were set with addEventListener. Since you bound the onclick declaratively in the HTML the way to unbind it would be by doing document.getElementById("magicButton").onclick = null.

That said I would change your example so that somewhere in your code you set the event listener using addEventListener.

Example:

function firstTimeOnly() {
    sourceVector.set('loader', loader);
    sourceVector.set('strategy', strategy);
    changeFilter();
    document.getElementById("magicButton").removeEventListener("click", firstTimeOnly, false);
    document.getElementById("magicButton").addEventListener("click", changeFilter, false);
}
document.getElementById("magicButton").addEventListener("click", firstTimeOnly, false);

And get rid of the onclick in the HTML.

Also consider caching the reference to magicButton so that you don't have to be constantly calling getElementById.

var magicButton = document.getElementById("magicButton");