How to prevent popup when there is no feature

Question

I use OL3 together with geoserver to display one WMS layer. Then I use the GetFeatureInfo to display some of the data on button click. I want to prevent to show the popup when I click outside the layer's features (as shown in the attachment)

How can I do this in OL3? This is the part of the code, which takes care the getFeatureInfo:

map.on('singleclick', function (evt) {

  var viewResolution = map.getView().getResolution();
  var coord = evt.coordinate;
      if (grid_layer.getVisible() && grid_layer.get('name') != 'Basemap') {

          var url = grid_layer.getSource().getGetFeatureInfoUrl(coord, viewResolution, 'EPSG:3857', {
              'INFO_FORMAT': 'text/html',
              'FEATURE_COUNT': '1',
              'propertyName': 'url'
          });

          if (url) {
              overlay.setPosition(coord);
              content.innerHTML = '<iframe src="' + url + '" style="border:0px #BD8D46 dotted;" scrolling="auto" frameborder="no" align="center"></iframe>';

          }
      }
  });

Answer 1

i know this is an old thread but maybe it could help somebody, i use a little trick to check the length of the return data

       info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: 'http://blala.com/wms/', 
        title: 'Identify features by clicking',
        queryVisible: true,
        eventListeners: {
            getfeatureinfo: function(event) {
                if (event.text.length>658) // <<=== use this, empty feature return 658 character or just check the length using alert(event.text.length);

                {

                var pops = map.popups;
                 for (var a = 0; a < pops.length; a++) {
                     if (pops.length == 1) {
                         map.removePopup(map.popups[0]);
                     }
                 };

                map.addPopup(new OpenLayers.Popup.FramedCloud(
                    "ayam", 
                    map.getLonLatFromPixel(event.xy),
                    null,
                    event.text,
                    null,
                    true
                ));
                }
            }
        }
    });

     map.addControl(info);
    info.activate();

Answer 2

Using 'INFO_FORMAT' text/xml or application/json would be more elegant to check if response has some features. But as you use text/html, you have to count the amount of table rows in the HTML response.

You have to use a AJAX request to get the HTML code and then check if there are more than 1 table rows (as an empty response contains 1 table row). So I would change the code after getting the url to this:

$.get(url).then(function(response) {
    if (response.split("<TR>").length - 2 !== 0) {
        overlay.setPosition(coord);
        content.innerHTML = '<iframe src="' + url + '" style="border:0px #BD8D46 dotted;" scrolling="auto" frameborder="no" align="center"></iframe>';
    }
});