Add update() function to cql filter using Openlayers 3

Question

it's been 3 days I am searching for a solution but i didn't found an answer. In the first time I was working with WFS request to display my layers using update() function to get layer from Dropdown list and change the value of cql-filter and it work:

<select name="pam" class='pam' id="pam" onchange='update()'> 
  <option value="Arbuuned">Moyen</option>
  <option value="Bended">Fort</option>
</select>
<script>
var vector = new ol.layer.Vector( { source: new ol.source.Vector() })

var geojsonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url = "http://localhost:8080/geoserver/opengeo/ows?service=WFS&" +
        "version=2.0.0&request=GetFeature&typename=opengeo:arbousiers0&CQL_FILTER=code_espec="+"'"+pam.value+"'"+
        "&outputFormat=text/javascript&format_options=callback:loadFeatures"+
        "&srsname=EPSG:3857";
    $.ajax({url: url, dataType: 'jsonp', jsonp: false});
  },
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 19

  }))

});
window.loadFeatures = function(response) {
  vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
 window.update = function() {
 vectorSource.clear(true);
};

</script>

but when i decide to work with WMS request i change the script like this:

var wmsSource= "code_espec="+"'"+pam.value+"'"+"";
 window.update = function() {
   wmsSource.clear(true);
};
new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: 'http://localhost:8080/geoserver/opengeo/wms',
            params: {'LAYERS': 'opengeo:arbousiers0','cql_filter':wmsSource},
            serverType: 'geoserver'                                            
          })})

I get nothing when i choose my layer from dropdown list. I don't know if there is somethings to add or an error I made? Thank u

Answer 1

I think there is a problem in the function to update the value. I suggest this :

 window.update = function(){ad.getSource().updateParams({'cql_filter':"code_espec"+"="+"'"+pam.value+"'"+"});};

         var ad =new ol.layer.Image({
                    name: 'Espece(Répartition)',
              source: new ol.source.ImageWMS({
                url: 'http://localhost:8080/geoserver/opengeo/wms',
                params: {'LAYERS': 'opengeo:arbousiers0'},
                serverType: 'geoserver'                                            
              })});