IE8 event.currentTarget is null or not an object

Question

There is an incompatibility with IE8 in my Javascript and I am not sure how to resolve it. I am getting an error "currentTarget is null or not an object," which is occurring in this snippet of code:

(function() {
  var basicTemplate, _timer, _url;
  _timer = null;
  _url = "/search";
  $(document).ready(function() {
    var search, searchCallback, searchFailure;
    $('[data-does=typeahead-rep-search]').on('keyup', function(e) {
      clearTimeout(_timer);
      return _timer = setTimeout(search, 300, e);
    });
    search = function(e) {
      var $query, division, request, target, _data;
      $query = $(e.currentTarget);
      _data = {};
      if (_data.q.length > 2) {
        return request = $.ajax(_url, {
          data: _data,
          success: searchCallback,
          error: searchFailure
        });
      } else {
        return $('#search-results').html("");
      }
    };
    searchCallback = function(data, status, jqXhr) {
      return $('#search-results').html(basicTemplate(data));
    };
    return searchFailure = function(jqXhr, status, errorThrown) {
      console.log('an error has occurred while attempting to search');
      return $('#search-results').html("");
    };
  });

}).call(this);

Does anyone know how I can recode this snippet in order to make it function properly in IE?

Thanks!

Answer 1

I found the issue. The problem is this line:

setTimeout(search, 300, e);

The easiest fix would be this:

setTimeout((function(e) { return function() { search(e) }; })(e), 300);

I've wrapped it in a closure to avoid scoping issues.

From the documentation for setTimeout :

Note that passing additional parameters to the function in the first syntax does not work in Internet Explorer < 9. If you want to enable this functionality on that browser, you must use a compatibility code (see the Callback arguments paragraph).

I'm just going to copy this all wholesale from the docs, as a reference here.

If you need to pass an argument to your callback function, but need it to work in Internet Explorer, which doesn't support sending additional parameters (neither with setTimeout() or setInterval()) you can include this IE-specific compatibility code which will enable the HTML5 standard parameters passage functionality in that browser for both timers just by inserting it at the beginning of your scripts.

 /*\\ |*| |*| IE-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of JavaScript timers (HTML5 standard syntax). |*| |*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval |*| |*| Syntax: |*| var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); |*| var timeoutID = window.setTimeout(code, delay); |*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]); |*| var intervalID = window.setInterval(code, delay); |*| \\*/ if (document.all && !window.setTimeout.isPolyfill) { var __nativeST__ = window.setTimeout; window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setTimeout.isPolyfill = true; } if (document.all && !window.setInterval.isPolyfill) { var __nativeSI__ = window.setInterval; window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setInterval.isPolyfill = true; }

IE Only Fix

If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and above, you can either use JavaScript conditional comments:

 /*@cc_on // conditional IE < 9 only fix @if (@_jscript_version <= 6) (function(f){ window.setTimeout =f(window.setTimeout); window.setInterval =f(window.setInterval); })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}}); @end @*/

Or go for a very clean approach based on the IE HTML conditional feature:

 <!--[if lt IE 9]><script> (function(f){ window.setTimeout =f(window.setTimeout); window.setInterval =f(window.setInterval); })(function(f){return function(c,t){ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)} }); </script><![endif]-->

Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:

 var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);

Yet another possibility is to use function's bind. Example:

 setTimeout(function(arg1){}.bind(undefined, 10));

Answer 2

Alright, I resolved the issue by modifying the code as seen below. Please let me know if this is not the recommended method of resolving this issue.

SOURCE

search = function(e) {
      var $query, division, request, _data;
      var target = (e.currentTarget) ? e.currentTarget : e.srcElement;
      $query = $(target);
      _data = {};
      _data.q = $query.val();
      if (_data.q.length > 2) {
        return request = $.ajax(_url, {
          data: _data,
          success: searchCallback,
          error: searchFailure
        });
      } else {
        return $('#search-results').html("");
      }
    };